In this section, we will learn what the rel attribute is and how to use it.
What is rel Attribute in HTML <link> Tag?
The rel attribute stands for Relation and is used to set the relation between the current and the target document that is specified in the href attribute in an HTML <link> element.
For example, if the target document contains the style sheet of the current document, then the value of this attribute would be “stylesheet”.
HTML rel Attribute in <link> Tag Syntax:
<link href = “document address” rel = “relation”>
<link> Tag rel Attribute Values
In the table below, you can see the list of values we can set for the rel attribute:
Name |
Description |
alternate |
The target link is an alternate version of the current document. For example, the target link could be a printable version of the current document. |
author |
The target link provides information about the author of the current document. |
canonical |
Using this value means the target document is canonical (preferred) to the current document. This value is mainly used for SEO reasons. Basically, when we put a resource from another website (that is original content) in our webpage we should set the value of the rel attribute to “canonical” so that browsers know we’re not the original creator of that content. |
external |
The target link is an external resource and has nothing to do with the current document. |
dns-prefetch |
This value specifies that browsers should preemptively perform the DNS resolution for the target resource’s origin. |
help |
The target link provides help for the current document. |
icon |
When the content of the target document is an icon that represents the current document, this is the value we set for the rel attribute. |
license |
The target link provides a link to license information of the current document. |
next |
The target link provides a link to the next document in a series |
pingback |
This value specifies an address of the pingback server that handles pingbacks to the current document. |
preconnect |
This value specifies the browser should preemptively connect to the target resource’s origin. |
prefetch |
This value specifies the browser should preemptively fetch and cache the target resource as it is likely to be required for a follow-up navigation. |
preload |
This value specifies that the browser agent must preemptively fetch and cache the target resource for current navigation according to the destination given by the “as” attribute (and the priority associated with that destination). |
prerender |
This value specifies that browsers should load the target document in the background. So if users navigate to this page, it loads as soon as possible. Note: use this attribute with caution because it uses user’s bandwidth. |
prev |
The target link is the previous document in a series |
search |
The link is to a search tool for the current document |
stylesheet |
The target document is the style sheet of the current document. |
Example: using rel attribute in HTML <link> tag
See the Pen using rel attribute in HTML <link> tag by Omid Dehghan (@odehghan) on CodePen.