HTML rel Attribute

HTML rel Attribute: This attribute defines the relationship between the current document and the linked document. Some values removed and some values added in HTML 5.

HTML rel Attribute

This attribute can be applied on <a>,<area>,<link> elements.

Syntax: <a rel=”value”></a> 

Attribute Values

  • alternate: It defines an alternate version of the document i.e. print page, translated or mirror.
  • author: It defines the author of the document.
  • bookmark: It specifies a related document.
  • help: It specifies a help document.
  • licence: It defines copyright information for the document.
  • next: It defines the next document in a selection.
  • nofollow: It is used by Google, to specify that the Google search spider should not follow that link and mostly used for paid links.
  • noreferrer: It is used to specify that the browser should not send an HTTP referer header if the user follows the hyperlink.
  • prefetch: It specifies that the target document should be cached.
  • prev: It specifies the previous document in a selection.
  • search: It specifies the search tool for the document.
  • tag: It specifies a tag keyword for the current document.

Browser Support

This attribute is supported by the following browsers:

  • Chrome
  • Firefox
  • Internet Explorer
  • Safari
  • Opera

Example: for <a> element

<!DOCTYPE html>
<html>
<body>
<p>
<a rel="nofollow" href="http://www.functravel.com/">Cheap Flights</a>
</p>
</body>
</html>

Example: for <area> element

<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" rel="alternate">
</map>
</body>
</html>

Output:

HTML rel attribute

Example: for <link> element

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome</h1>
<p>Hello world!!</p>
</body>
</html>

Output:

HTML rel attribute