HTML a Tag rel Attribute Tutorial

In this section, we will learn what rel attribute is and how it works in HTML.

What is rel Attribute in HTML <a> Tag?

The rel attribute in HTML <a> tag as well as a couple of other HTML elements like <link> etc. is used to set the relation between the current document and the target linked document.

For example, if the linked document referring to the author of the current document, then we set the value of the `rel` attribute to “author”.

Or let’s say the linked document is an alternate version of the current document (for example it’s a ready to be printed version of the current document), so in that case the value of the `rel` attribute would be “alternate”.

HTML rel Attribute in <a> Tag Syntax:

<a rel = "value">

<a> Tag rel Attribute Values

In the table below you can see the list of values 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.

bookmark

The target link is a permanent URL that can be used for bookmarking the current document.

external

The target link is an external resource and has nothing to do with the current document.

help

The target link provides help for the current document.

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

nofollow

This value is mainly used for SEO reason and it’s a signal to search engines that the target link is not endorsed by the current document.

noopener

Requires that any browsing context created by following the hyperlink must not have an opener browsing context

noreferrer

This value makes the referer (sic) header empty. So when the request is sent to the target link, the address of the current document will be hidden from that target server.

prev

The target link is the previous document in a series

search

The link is to a search tool for the current document

tag

A tag or keyword for the current document

Example: using rel attribute in HTML <a> tag

See the Pen using rel attribute in HTML <a> tag by Omid Dehghan (@odchan1) on CodePen.

In this example, I’ve set the value of the `rel` attribute to “nofollow” because I’m linking to a website that paid for this link to appear on this webpage (hypothetically). So essentially I’m telling search engines that this link should not be checked because my website does not endorse it.

Leave a Reply