🗺️ HTML <area> Tag — Defining Clickable Regions in Image Maps
The <area> tag in HTML is used within an <map> element to define interactive regions on an image. These regions, or “hotspots,” can be shaped differently and are linked to various URLs, allowing the image to act like a clickable map.
📌 What Is the <area> Tag?
- The
<area>tag defines a specific clickable area inside an image when using an image map. - It is empty (self-closing) — it doesn’t have content inside.
- Must be used within a
<map>element. - Works in conjunction with the
usemapattribute on an<img>tag. - Supports several shapes: rectangle, circle, polygon.
✅ Basic Syntax
<area shape="rect" coords="34,44,270,350" href="https://example.com" alt="Example Link" />
shape: the type of region (rect,circle,poly).coords: the coordinates for the region.href: the link destination.alt: alternative text for accessibility.
🧪 Full Example: Interactive Image Map
<img src="planets.jpg" alt="Planets" usemap="#planetmap" width="600" height="300">
<map name="planetmap">
<area shape="rect" coords="0,0,100,100" href="https://mars.nasa.gov" alt="Mars">
<area shape="circle" coords="300,150,50" href="https://www.nasa.gov" alt="NASA">
<area shape="poly" coords="400,100,450,150,400,200,350,150" href="https://jupiter.com" alt="Jupiter">
</map>
🧭 This will create clickable zones on the image: a rectangle, a circle, and a polygon.
🎨 Supported Attributes of <area>
| Attribute | Description |
|---|---|
shape | Defines the shape: rect, circle, poly, or default |
coords | Coordinates defining the shape |
href | The link the area points to |
alt | Alternative text (important for accessibility) |
target | Specifies where to open the link (_blank, _self, etc.) |
download | Suggests downloading the linked file |
rel | Relationship between document and link |
type | MIME type of the target document |
📏 Shape and Coordinate Formats
| Shape | coords format | Description |
|---|---|---|
rect | x1,y1,x2,y2 | Top-left and bottom-right corners |
circle | x,y,radius | Center and radius |
poly | x1,y1,x2,y2,x3,y3,... | Sequence of polygon points |
default | no coordinates needed | Covers the entire image as fallback |
🧠 Accessibility Tips
- Always provide the
altattribute so users using screen readers understand what the area represents. - Consider also using a
titleattribute for hover tooltips. - Ensure that the image map makes sense visually and logically.
⚠️ Best Practices
- Don’t rely on image maps for navigation unless essential; use them for infographics or diagrams, not standard menus.
- Always pair with a
usemapon the image. - Use responsive-friendly alternatives for mobile when possible (image maps are fixed in size).
🏁 Summary
The <area> tag is a specialized but powerful HTML element for creating clickable regions in an image using an image map. While not common in modern responsive design, it remains useful for diagrams, floor plans, games, or interactive illustrations.
🎯 Use
<area>with<map>and<img usemap>to build meaningful image interactivity.