HTML Area Tag Rel Attribute

The HTML Area Tag Rel Attribute defines the relationship between the linking resource or webpage and the linked resource or webpage.

HTML Area Tag Rel Attribute is used only if the HTML Href Attribute is also used in the HTML area(<area>) tag.

Note: HTML Area Tag Rel Attribute is new in HTML 5.


Syntax of HTML Area Tag Rel Attribute

<area rel="value">

Values that HTML Area Tag Rel Attribute can have

HTML Area rel attribute Values Description
alternate This will link to the alternative version of resource or webpage e.g. print friendly page
author This links to the Author of the resource or webpage
bookmark Defines the permanent URL for bookmarking the resource or webpage
help This links to the help resource or webpage.
license Links to the copyright information of the resource or webpage
next Links to the next resource or document in the flow.
nofollow Links to an unauthorized resource or webpage

(Google spiders or bots use this information for not following the linked resource or webpage)

noreferrer Defines that the browser should not send an HTTP referrer header if the user chooses to click and follow the hyperlink.
prefetch Defines that the targeted resource or webpage should be cached
prev Links to the previous resource or document in the flow.
search This links to the search tool for the resource or webpage
tag Defines a tag or keyword(s) for the current resource or webpage

 Example of using the HTML Area Tag Rel Attribute

HTML Area Tag Rel Attribute Code Output
[sourcecode language=”html”]
<p>Click on the shapes to watch them:</p>
<img src=" HTMLAreaTagEx.gif" alt="Shapes"
usemap="#shapemap" width="145" height="126">
<map name="shapemap">
<area shape="circle" coords="25,30,12" href="Circle.jpg"
type="image/gif" target=_blank>
<area shape="rect" coords="62,30,82,40" href="triangle.jpg"
type="image/gif" target=_blank >
<area shape="circle" coords="115,35,10" href="star.jpg"
type="image/gif" target=_blank >
</map>
[/sourcecode]

Click on the shapes to watch them:

Shapes

Here in the above HTML Area rel attribute example we are telling the browsers that once an area is clicked the browser must open the corresponding images and the images are alternate of the images that have been clicked.


HTML Area Tag Rel Attribute Supporting Browsers

S. No. Browser Supported(Yes/No)
1 Internet Explorer Yes
2 Firefox Yes
3 Google Chrome Yes
4 Opera Yes
5 Safari Yes

Leave a Reply

Your email address will not be published. Required fields are marked *