HTML <link> with rel Attribute

February 10, 2021 7:26 pm IST

❮ Prev Next ❯

You are Here:

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

Value	Explanation
alternate	Provides a link to an alternate version of the document.
author	Provides a link to the author of the current document.
dns-prefetch	Performs DNS lookup on a page in the background while the user is browsing.
help	Provides a link to a help document.
icon	Specifies the favicon of a webpage.
license	Provides a link to copyright information for the document.
next	Provides a link to the next document in the series.
pingback	Provides the URL of a webpage which links to your webpage.
preconnect	Setup an early connection to eliminate the roundtrip latency.
prefetch	Prefetch the linked document by utilizing the browser's idle time.
preload	Renders the specific file eg) image, javascript, css.
prerender	Renders the entire file of the linked document in the background.
prev	Provides a link to the Previous document in the series.
search	Provides the link to the document, which performs search operation within your website.
stylesheet	Imports 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>

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>

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