HTML Tags
HTML <area> Tag
The <area> tag defines a clickable hotspot inside an image map, letting different regions of a single image link to different destinations. It is always used inside a <map> element.
The <area> Tag
The <area> element specifies a region of an image map that is clickable and can act as a hyperlink. Each <area> defines one hotspot with a shape (rectangle, circle, or polygon), its coordinates, and a destination.
It is a void element used only inside a <map>. The map is then connected to an image using the image's usemap attribute.
Syntax
Example
<map name="mymap">
<area shape="rect" coords="0,0,100,100" href="page.html" alt="Region" />
</map>Example
Example
<!DOCTYPE html>
<html>
<body>
<h1>Image Map Demo</h1>
<img src="https://picsum.photos/200" alt="Clickable image" usemap="#demomap" />
<map name="demomap">
<area shape="rect" coords="0,0,100,200"
href="https://www.wikipedia.org/" alt="Left half" />
<area shape="rect" coords="100,0,200,200"
href="https://www.mozilla.org/" alt="Right half" />
</map>
<p>Click the left or right half of the image.</p>
</body>
</html>More Examples
Example
<!DOCTYPE html>
<html>
<body>
<img src="https://picsum.photos/200" alt="Map" usemap="#circlemap" />
<map name="circlemap">
<area shape="circle" coords="100,100,80"
href="https://example.com" alt="Center circle" />
</map>
<p>A circular hotspot at the centre of the image.</p>
</body>
</html>Attributes
| Attribute | Description |
|---|---|
| shape | The hotspot shape: rect, circle, poly, or default. |
| coords | Coordinates defining the hotspot, depending on the shape. |
| href | The URL the hotspot links to. |
| alt | Alternative text, required when href is present. |
| target | Where to open the link, for example _blank. |
💡
Always provide an alt attribute on every clickable <area> for accessibility. Screen readers rely on it to describe each hotspot.
Key Takeaways
- <area> defines a clickable hotspot in an image map.
- It lives inside a <map>, linked to an image via usemap.
- shape and coords define the hotspot geometry.
- It is a void element and needs alt text.
- Shapes can be rect, circle, poly, or default.