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:
|
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 |