<area>: The AREA Element
Last updated: 2026-10-13
<area>The AREA Element
Defines one clickable region (rectangle, circle or polygon) inside a <map>; each area sets the shape, coordinates and target link.
| Category | Links & Media |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Self-closing — no closing tag needed |
| Status | Standard |
📝 Syntax
<area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">⚙️ Attributes
This element supports the global attributes plus the following:
| Attribute | Value | Description |
|---|---|---|
shape | Region shape: default, rect, circle or poly. | |
coords | Coordinates for the shape, in pixels, comma-separated. | |
href | Target URL when the region is clicked. | |
alt | Alternative text for the region (required for accessibility). | |
target | Where to open the link, e.g. _blank. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <area> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： area is a void element; it must live inside <map> and be referenced by an <img> usemap.
❓ FAQ
QWhat does the area tag do?
A
<area> defines clickable hotspots inside a <map>: use shape (rect/circle/poly) and coords to outline regions that link to an href. Classic use cases: image-map navigation and interactive instrument panels.QHow do I calculate the coords of an area?
ACoordinates are pixel values from the image's top-left corner (0,0):
rect takes two x,y pairs (top-left and bottom-right); circle takes center x,y plus radius; poly takes a series of vertex points. Measure from the design mockup and fill them in directly — hotspots do not scale with the image automatically (needs JS or a responsive fallback).QIs alt required on area?
AYes, when href is present.
<area> is a link, and alt is its 'link text' — screen readers announce the hotspot's purpose from it. An image hotspot without alt is completely unusable for visually impaired users.🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
