Computer >> Computer tutorials >  >> Programming >> HTML

HTML <area> rel Attribute

The rel attribute of the <area> element is used to set the relationship between the current document and the linked document. This attribute introduced in HTML5 for the <area> element. 

Following is the syntax −

<area rel="value">

Above, value can be any of the following options that links to −

  • alternate: An alternate version of the document, for example, to print.
  • author: Author of the document
  • bookmark: Permanent URL used for bookmarking
  • help: Help document
  • license: Copyright information
  • next: Next document in a selection
  • nofollow: Links to a link which you do not want that the Google indexing to follow that link.
  • noreferrer: Specifies that the browser should not send a HTTP referer header if the user follows the hyperlink
  • prefetch: Specifies that the target document should be cached
  • prev: Previous document in a selection
  • search: Links to a search tool for the document
  • tag: A tag for the current document

Let us now see an example to implement the rel attribute of the <area> element −

Example

<!DOCTYPE html>
<html>
<body>
<h2>Learning</h2>
<p>Learn these technologies with ease....</p>
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
<map name = "tutorials">
   <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
      href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" rel="alternate"/>
   <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
      href = "/html/index.htm" target = "_blank" />
   <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
      href = "/php/index.htm" target = "_blank" />
</map>
</body>
</html>

Output

HTML <area> rel Attribute

In the above example, we have set the map on the following image −

<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>

Now, we have set the map and area within it for shape −

<map name = "tutorials">
   <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
      href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" rel="alternate"/>
   <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
      href = "/html/index.htm" target = "_blank" />
   <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
      href = "/php/index.htm" target = "_blank" />
</map>

Above, we have set the relationship for the alternate version −

rel="alternate"