HTML link Tag rel Attribute Tutorial

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.

Leave a Reply