HTML <area> Tag: The <area> tag specifies an area inside an image-map which contains clickable areas. The usemap attribute in the <img> tag is associated with the <map> element’s name attribute and it creates a relationship between the image and the map tags.
HTML <area> Tag
The area tag supports both the global and event attributes in the HTML.
Syntax: &ly;area>
Browser compatibility
The <area> tag is supported by a different type of browsers.
- Chrome
- Firefox
- Safari
- InternetExplorer
- Opera browsers.
Example:
<img src="planets.gif" width="145" height="126" alt="Citrus fruits" usemap="#citrusfruits"> <map name="planetmap"> <area shape="square" coords="0,0,82,126" href="orange.htm" alt="orange"> <area shape="circle" coords="90,58,3" href="lemon.htm" alt="lemon"> <area shape="rect" coords="124,58,8" href="grape.htm" alt="grape"> </map>
Output:
Attributes that are supported by the <area> tag
| Attribute | Value | Description |
|---|---|---|
| alt | text | Specifies an alternate text for the area. Required if the href attribute is present |
| coords | coordinates | Specifies the coordinates of the area |
| href | URL | Specifies the hyperlink target for the area |
| nohref | value | Specifies that an area has no associated link |
| shape | default rect circle poly |
Specifies the shape of the area |
| target | _blank _parent _self _top frame name |
Specifies where to open the target URL |