HTML <a> with rel Attribute

February 10, 2021 7:26 pm IST

❮ Prev Next ❯

You are Here:

HTML <a> with rel Attribute

The rel attribute defines the relationship between the current document and the linked document.

rel = "alternate"

Specifies the alternate link to the current document.

Explanation

Consider the following example as an index page (home page) of a website (www.example.com).

This website customized its index page for 3 other english speaking countries

en-au - Australia
en-in - India
en-ca - Canada

If any user from Canada is searching for www.example.com, the search engine will prefer 'https://www.example.com/en-ca' instead of "https://www.example.com"

If any user from Singapore is searching for www.example.com, the search engine will prefer 'https://www.example.com' because it does not have a customized index page for Singapore.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <link rel="alternate" href="https://www.example.com/en-au" hreflang="en-au"> <link rel="alternate" href="https://www.example.com/en-in" hreflang="en-in"> <link rel="alternate" href="https://www.example.com/en-ca" hreflang="en-ca"> <link rel="alternate" href="https://www.example.com" hreflang="en"> </body> </html>

Result: The following image is the search result of microsoft in India using google search engine.

Attribute Value

Value	Explanation
alternate	Specifies the alternate link to the current document.
author	Provides the link to the author of the document.
bookmark	Specifies the URL of the document will not be changed in any case.
external	Specifies the URL in the href attribute doesn't belongs to the same host.
help	Provides the link to the help document.
license	Provides the link to the copyright information for the current page.
next	Specifies the link to the next document.
nofollow	Specifies that URL in the href attribute is the paid link.
noreferrer	Specifies whether to send the referer of the current page to the linked URL.
noopener	Specifies whether the newely opened document with target="_blank" has the rights to access the current window.
prev	Specifies the link to the previous document.
search	Specifies the URL to search through current page and its related page.
tag	Specifies that the URL in the href attribute contains the topic regarding tag.

rel = "author"

Provides the link to the author of the document.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <a rel="author" href="https://www.example.com/joe-bloggs">Joe Bloggs</a> </body> </html>

rel = "bookmark"

Specifies the URL of the document will not be changed in any case.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <a rel="bookmark" href="https://wikimass.com">Wikimass.com</a> </body> </html>

rel = "external"

Specifies the URL in the href attribute doesn't belongs to the same host.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <a rel="external" href="https://www.example.com">example.com</a> </body> </html>

rel = "help"

Provides the link to the help document.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p> Facing trouble with our site. Please reach us on our <a rel="help" href="https://www.example.com/report-us">Report us</a> page.</p> </body> </html>

rel = "license"

Provides the link to the copyright information for the current page.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p>Have you ever visited our <a rel="licence" href="https://www.example.com/copyrights">Copyrights policy</a> </p> </body> </html>

rel = "next"

Specifies the link to the next document in the series

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <a rel="next" href="https://wikimass.com/html/tag-abbr">Next</a> </body> </html>

Run

rel = "nofollow"

Specifies that URL in the href attribute is the paid link.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <a rel="nofollow" href="https://www.example.com">Other Website</a> </body> </html>

rel = "noreferrer"

The rel = "noreferrer" hides referrer information when the link is clicked.

This attribute value is useful when you are referring to a 3^rd party site and you don't want that site to identify your domain.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <a rel="noreferrer" href="https://www.xyz.com">xyz website</a> </body> </html>

rel = "noopener"

Specifies whether the newely opened document with target="_blank" has the rights to access the current window.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p>Random Number is : <output id="rand-output"></output></p>  <a rel="noopener" href="/html/tag-a/attribute-rel/test-file" target="_blank"><a target="_blank" rel="noopener"></a>  <a href="/html/tag-a/attribute-rel/test-file" target="_blank"><a target="_blank"></a> <script> var x = document.getElementById("rand-output"); setInterval(function(){ x.innerHTML = Math.random(); }, 50); </script> </body> </html>

Run

rel = "prev"

Specifies the link to the previous document.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <a rel="prev" href="https://wikimass.com/html/tag-doctype">Previous</a> </body> </html>

Run

rel = "search"

Specifies the URL to search through current page and its related page.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <a rel="search" href="http://www.example.com/search">Search Page</a> </body> </html>

rel = "tag"

Specifies that the URL in the href attribute contains the topic regarding tag.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <a rel="tag" href="https://www.example.com/html">HTML</a> <a rel="tag" href="https://www.example.com/css">CSS</a> </body> </html>