HTML <link> with rel Attribute

❮ PrevNext ❯

HTML <link> with rel Attribute

The rel attribute specifies the relationship between the current document and the linked document.

alternate

The alternate attribute value provides a link to an alternate version of the document.

Note: This attribute works only on firefox.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <link rel="stylesheet alternate" href="style-yellow.css" title="Yellow"> <link rel="stylesheet alternate" href="style-violet.css" title="Violet"> </head> <body> <p>Open this page in firefox.</p> </body> </html>
Run

Attribute Values

ValueExplanation
alternateProvides a link to an alternate version of the document.
authorProvides a link to the author of the current document.
dns-prefetchPerforms DNS lookup on a page in the background while the user is browsing.
helpProvides a link to a help document.
iconSpecifies the favicon of a webpage.
licenseProvides a link to copyright information for the document.
nextProvides a link to the next document in the series.
pingbackProvides the URL of a webpage which links to your webpage.
preconnectSetup an early connection to eliminate the roundtrip latency.
prefetchPrefetch the linked document by utilizing the browser's idle time.
preloadRenders the specific file eg) image, javascript, css.
prerenderRenders the entire file of the linked document in the background.
prevProvides a link to the Previous document in the series.
searchProvides the link to the document, which performs search operation within your website.
stylesheetImports a style sheet.

author

The author attribute value provides a link to the author of the current document.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <link rel="author" href="https://www.example.com"> </head> <body> <h1>This is a Heading.</h1> <p>This is a Paragraph.</p> </body> </html>

dns-prefetch

The dns-prefetch attribute value will prefetch the DNS information for that domain specified in the href attribute before it is actually needed.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <link rel="dns-prefetch" href="https://jquery.com"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <p>click me</p> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </body> </html>

help

The help attribute value provides a link to a help document.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <link rel="help" href="/js"> </head> <body> <p>Javascript is the most powerful web programming language.</p> </body> </html>

icon

The icon attribute value specifies the favicon of a webpage.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <link rel="icon" href="/favicon.ico" type="image/x-icon"> </head> <body> <p>Displays favicon in your browser tab.</p> </body> </html>

license

The license attribute value provides a link to copyright information for the document.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <link rel="license" href="/copyrights"> </head> <body> <h1>This is a Heading.</h1> <p>This is a Paragraph.</p> </body> </html>

next

The next attribute value provides a link to the next document in the series.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <link rel="next" href="/html/tag-map"> </head> <body> <h1>This is a Heading.</h1> <p>This is a Paragraph.</p> </body> </html>

pingback

The pingback attribute value provides the URL of a webpage which links to your webpage.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <link rel="pingback" href="/server/backlinks.php"> </head> <body> <h1>This is a Heading.</h1> <p>This is a Paragraph.</p> </body> </html>

preconnect

The preconnect attribute value is used to fetch the required resources in advance. Preconnect allows the browser to setup an early connection before an HTTP request actually sent to the server. This includes the DNS lookup, TCP handshake, and optional TLS negotiation. This is turn will elminates roundtrip latency, which saves 200ms to 700ms.

Note: subdomain should be treated as seperate website.

Example

HTML Online Editor
<!DOCTYPE html> <html> <html> <head> <link rel="preconnect" href="https://www.example.com"> <link rel="preconnect" href="https://subdomain.example.com"> </head> <body> <h1>This is a Heading.</h1> <p>This is a Paragraph.</p> </body> </html>

prefetch

The prefetch attribute value allows the browser the fetch the resource in the background while the user is browsing and store the resource in browser's cache,assuming that the user may request them.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <link rel="prefetch" href="/horse.jpg"> </head> <body> <div id="myImg"></div> <button onclick="myFunction()">Click to get</button> <script> function myFunction(){ document.getElementById("myImg").innerHTML="<img src='/horse.jpg' height='250px' width='250px'>" } </script> </body> </html>
Run

preload

The preload attribute value is little bit different from prefetch. prefetch load the resource for next navigation (low priority) whereas preload loads the resource for current navigation(high priority).

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <link rel="prefetch" href="/horse.jpg" as="image"> </head> <body> <div id="myImg"></div> <button onclick="myFunction()">Click to get</button> <script> function myFunction(){ document.getElementById("myImg").innerHTML="<img src='/horse.jpg' height='250px' width='250px'>"; } </script> </body> </html>
Run

prerender

The prerender attribute value is much similar to preload, preload renders specific file such as javascript,css,image etc, whereas prerender renders the entire page in the background which includes javascript, css, image etc.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <link rel="prerender" href="https://www.example.com"> </head> <body> <h1>This is a Heading.</h1> <p>This is a Paragraph.</p> </body> </html>

prev

The prev attribute value provides a link to the Previous document in the series.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <link rel="prev" href="/html/tag-li"> </head> <body> <h1>This is a Heading.</h1> <p>This is a Paragraph.</p> </body> </html>

search

The search attribute value provides the link to the document, which performs search operation within your website.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml"> </head> <body> <h1>This is a Heading.</h1> <p>This is a Paragraph.</p> </body> </html>

stylesheet

The stylesheet attribute value imports a style sheet.

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>This is a Heading.</h1> <p>This is a Paragraph.</p> </body> </html>
Run

Reminder

Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in HTML.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Meet the Author