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
<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:
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
|Defines an alternative text for the image area. This is a required attribute if the href attribute is used.
|Defines the coordinates of the area
|Defines the hyperlink target that should be opened
|Defines the language of the targeted resource.
|Characterize for what media type the target URL is optimized for.
|Characterize that the area has no link associated to it. (Not Supported in HTML 5)
|Defines the relationship between the current and the linked document.
|Defines the shape of the area
|Defines where to open the targeted URL
|Defines the MIME type of the linked URL
HTML Area Tag Supporting Browsers