**`<area>`** is a void element, always nested inside a `<map>`, and requires **`shape`** (`rect`, `circle`, `poly`, or `default` for the entire remaining image area) plus matching **`coords`** (pixel values whose meaning depends on the shape — x1,y1,x2,y2 for a rectangle; x,y,radius for a circle; a flat list of x,y pairs for a polygon). Like `<a>`, it needs **`href`** for the destination and should include **`alt`** text describing that specific region for accessibility.
1Understanding <area>
`<area>` is a void element, always nested inside a <map>, and requires `shape` (rect, circle, poly, or default for the entire remaining image area) plus matching `coords` (pixel values whose meaning depends on the shape — x1,y1,x2,y2 for a rectangle; x,y,radius for a circle; a flat list of x,y pairs for a polygon). Like <a>, it needs `href` for the destination and should include `alt` text describing that specific region for accessibility.
For shape="poly", coords is a flat, comma-separated list of alternating x,y pairs tracing the polygon's vertices in order — getting this list right for a complex shape usually requires an image-map-generating tool rather than hand-calculating coordinates.
<map name="buttons">
<area shape="rect" coords="0,0,50,50" href="/home" alt="Home button">
<area shape="rect" coords="60,0,110,50" href="/settings" alt="Settings button">
</map>2Practical Example
Here is a real-world application of <area> showing how it is used in production HTML.
<!-- A triangular polygon region -->
<area shape="poly" coords="50,0,100,100,0,100" href="/triangle-zone" alt="Triangular zone">3Best Practices
Follow these guidelines when working with <area>:
1. Match the coords format to the chosen shape exactly (rect, circle, poly each expect a different coordinate layout)
2. Always include alt text describing what that specific clickable region represents
3. Use shape="default" for a catch-all region covering whatever isn't covered by other more specific areas
Tip: For shape="poly", coords is a flat, comma-separated list of alternating x,y pairs tracing the polygon's vertices in order — getting this list right for a complex shape usually requires an image-map-generating tool rather than hand-calculating coordinates.
<map name="buttons">
<area shape="rect" coords="0,0,50,50" href="/home" alt="Home button">
<area shape="rect" coords="60,0,110,50" href="/settings" alt="Settings button">
</map>