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
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<a href="https://www.advertisement-website.com/ads" rel="nofollow">Paid Link</a>
</body>
</html>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.