HTML Area Tag

What HTML Area Tag does is that it classifies an area within an HTML image map.  Now, an HTML image map is nothing but an image with area that can be clicked or with clickable areas within the image.

The HTML Area Tag is always nested inside the HTML Map Tag.

The usemap attribute of the HTML Image Tag must have the same value as that of the name attribute of the HTML Map Tag and this is what creates the relationship between the image and the map.


Example of HTML Area Tag

HTML Area Tag Code                              Output
<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" 
alt="Circle" href="Circle.jpg" target=_blank>
<area shape="circle" coords="72,35,10" 
alt="Triangle" href="triangle.jpg" target=_blank >
<area shape="circle" coords="115,35,10" 
alt="Star" href="star.jpg" target=_blank >
</map>

Click on the shapes to watch them:

Shapes

Circle Triangle Star

Here in the above HTML Area Tag example, if we click on the circle, triangle or on star then we will be able to have a closer look at the clicked image. Also note that the closer look images will open in a new window or tab as we have used the target attribute with _blank value.

Note that we are clicking in a certain portion of the image.


Attributes of HTML Area Tag

HTML Area Tag Attribute Value Description
alt Text Defines an alternative text for the image area. This is  a required attribute if the href attribute is used.
coords Coordinates Defines the coordinates of the area
href URL Defines the hyperlink target that should be opened
hreflang Language_code Defines the language of the targeted resource.
media Media query Characterize for what media type the target URL is optimized for.
nohref Value Characterize that the area has no link associated to it. (Not Supported in HTML 5)
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
Defines the relationship between the current and the linked document.
shape default
rect
circle
poly
Defines the shape of the area
target _blank
_parent
_self
_top
framename
Defines where to open the targeted URL
type MIME_type Defines the MIME type of the linked URL

HTML area tag also supports all the HTML Global Attributes and HTML Event Attributes


HTML Area Tag 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

Tagged , , , , , , , , , , , , , , . Bookmark the permalink.