HTML DOM Link rel Property

HTMLWeb DevelopmentFront End Technology

<p>The HTML DOM Link rel property sets/returns the relationship between the current and the linked document and is required to mention.</p><h2>Syntax</h2><p>Following is the syntax &minus;</p><ul class="list"><li>Returning <strong>rel</strong> attribute value</li></ul><pre class="result notranslate">linkObject.rel</pre><ul class="list"><li>Setting <strong>rel</strong> to a valueString</li></ul><pre class="result notranslate">linkObject.rel = valueString</pre><h2>Value Strings</h2><p>Here, <strong>&ldquo;valueString&rdquo;</strong> can be the following &minus;</p><table class="table table-Bordered"><thead><tr><th style="text-align: center; width: 16.2585%;">valueString</th><th style="text-align: center; width: 83.6054%;">Description</th></tr></thead><tbody><tr><td style="width: 16.2585%;">alternate</td><td style="width: 83.6054%;">It provides</td></tr><tr><td style="width: 16.2585%;">author</td><td style="width: 83.6054%;">It provides a link to the author of the linked document</td></tr><tr><td style="width: 16.2585%;">dnsprefetch</td><td style="width: 83.6054%;">It specifies that the browser should pre-emptively perform DNS resolution for the target resource&#39;s origin</td></tr><tr><td style="width: 16.2585%;">help</td><td style="width: 83.6054%;">It provides a link to a help document if any</td></tr><tr><td style="width: 16.2585%;">icon</td><td style="width: 83.6054%;">It imports an icon to represent the document</td></tr><tr><td style="width: 16.2585%;">rel</td><td style="width: 83.6054%;">It sets/returns the relationship between the current and the linked document</td></tr><tr><td style="width: 16.2585%;">license</td><td style="width: 83.6054%;">It provides copyright information for the linked document</td></tr><tr><td style="width: 16.2585%;">next</td><td style="width: 83.6054%;">It provides a link to the next document in the series of documents</td></tr><tr><td style="width: 16.2585%;">pingback</td><td style="width: 83.6054%;">It provides the address of the pingback server that handles pingbacks to the current linked document</td></tr><tr><td style="width: 16.2585%;">preconnect</td><td style="width: 83.6054%;">It specifies that the browser should pre-emptively connect to the target resource&#39;s origin if any</td></tr><tr><td style="width: 16.2585%;">prefetch</td><td style="width: 83.6054%;">It specifies that the browser should pre-emptively fetch and cache the target resource as it is required to follow-up navigation of document</td></tr><tr><td style="width: 16.2585%;">preload</td><td style="width: 83.6054%;">It specifies that the browser agent must pre-emptively fetch and cache the target resource for current navigation according to the destination given by the &quot;as&quot; attribute (and the priority associated with that destination).</td></tr><tr><td style="width: 16.2585%;">prerender</td><td style="width: 83.6054%;">It specifies that the browser should load the specified webpage in the background. So, if the user navigates to this page, it speeds up the page load</td></tr><tr><td style="width: 16.2585%;">prev</td><td style="width: 83.6054%;">It indicates that the document is a part of a series, and that the previous document in the series is the referenced linked document</td></tr><tr><td style="width: 16.2585%;">search</td><td style="width: 83.6054%;">It provides a link to a resource that can be used to search through the current document and its related pages.</td></tr><tr><td style="width: 16.2585%;">stylesheet</td><td style="width: 83.6054%;">It imports a style sheet in the current document</td></tr></tbody></table><h2>Example</h2><p>Let us see an example for <strong>Link rel</strong> property &minus;</p><p><a class="demo" href="http://tpcg.io/mApvD8" rel="nofollow" target="_blank">&nbsp;Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Link rel&lt;/title&gt; &lt;link id=&quot;extStyle&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;fieldset&gt; &lt;legend&gt;Link-rel&lt;/legend&gt; &lt;div id=&quot;divDisplay&quot;&gt;&lt;/div&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;script&gt; &nbsp; &nbsp;var divDisplay = document.getElementById(&quot;divDisplay&quot;); &nbsp; &nbsp;var extStyle = document.getElementById(&quot;extStyle&quot;); &nbsp; &nbsp;if(extStyle.rel === &#39;stylesheet&#39;) &nbsp; &nbsp; &nbsp; divDisplay.textContent = &#39;The linked document is of type stylesheet&#39;; &nbsp; &nbsp;else &nbsp; &nbsp; &nbsp; divDisplay.textContent = &#39;The linked document is of type &#39;+extStyle.rel; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>In the above example <strong>&lsquo;style.css&rsquo;</strong> contains &minus;</p><pre class="prettyprint notranslate">form { &nbsp; &nbsp;width:70%; &nbsp; &nbsp;margin: 0 auto; &nbsp; &nbsp;text-align: center; } * { &nbsp; &nbsp;padding: 2px; &nbsp; &nbsp;margin:5px; } input[type=&quot;button&quot;] { &nbsp; &nbsp;border-radius: 10px; }</pre><h2>Output</h2><p>This will produce the following output &minus;</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/25913/link_rel.jpg" class="fr-fic fr-dib" style="width:600px; height:125px;" width="600" height="125"></p>
raja
Updated on 30-Jul-2019 22:30:26

Advertisements