HTML Tags
HTML <area> Tag
The <area> tag defines a clickable area inside an image map, letting different regions of an image link to different destinations.
What is the <area> tag?
The <area> element defines a hot-spot region on an image and can associate it with a hyperlink. It is always used inside a <map> element, which is linked to an image through the image's usemap attribute. <area> is a void element (no closing tag).
Complete example
<!DOCTYPE html>
<html lang="en">
<body>
<img src="workplace.png" alt="Workplace" usemap="#workmap" width="400" height="300" />
<map name="workmap">
<area shape="rect" coords="34,44,270,150" href="computer.html" alt="Computer" />
<area shape="circle" coords="337,300,44" href="coffee.html" alt="Coffee" />
</map>
</body>
</html>Attributes
| Attribute | Description |
|---|---|
| shape | The shape of the region: rect, circle, poly, or default. |
| coords | The coordinates that define the region, matched to the shape. |
| href | The hyperlink target for the region. |
| alt | Alternative text for the region; required when href is present. |
| target | Where to open the linked document, e.g. _blank. |
| download | Prompts a download of the linked resource instead of navigation. |
💡
The alt attribute is required on any <area> that has an href, for accessibility and validation.
The <area> tag is supported in all browsers, though image maps are used less often today in favour of separate elements and CSS.