: The AREA Element
Last updated: 2026-09-12
<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.
🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
