<map>: The MAP Element
Last updated: 2026-10-13
<map>The MAP Element
Defines a client-side image map; child <area> elements mark clickable regions, wired up via an <img> usemap attribute.
| Category | Links & Media |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Yes — requires closing </map> tag |
| Status | Standard |
📝 Syntax
<map name="planet">
<area shape="circle" coords="..." href="...">
</map>⚙️ Attributes
This element supports the global attributes plus the following:
| Attribute | Value | Description |
|---|---|---|
name | Map name; an |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <map> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： map shows nothing by itself; it needs an <img usemap> and child <area> elements.
❓ FAQ
QWhat must map be used with?
A
<map> is a hotspot container used together with one <img usemap='#mapid'> and several <area> elements: the img's usemap points to the map's name (with a #), and the map's areas define each hotspot. All three pieces are required.QWhat is the difference between name and id on map?
AThe usemap attribute references the map's
name value (the spec also requires an identical id for compatibility). Setting both attributes to the same value is safest: <map name='cn' id='cn'>.QIs the image-map approach still recommended?
AIt still has niche value (illustration interactions, retro maps), but the mainstream replacements are 'absolutely-positioned elements overlaid on the image' or SVG with embedded links — SVG scales responsively, hotspots can be styled independently, and maintenance is much cheaper. Prefer SVG for new interactive images.
🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
