The <map> & <area> elements
The <map> and <area> tags turn parts of an image into links, called an image map. Each <area> defines a clickable region with a shape (rectangle, circle or polygon) and pixel coords, plus an href and alt text. The image connects to the map through its usemap attribute, matching the map’s name.
Last updated: October 3, 2026
Quick facts
| Category | <map>: flow, phrasing, palpable content. <area>: flow, phrasing content |
| Content model | <map>: transparent (usually just <area> elements). <area>: empty, it’s a void element |
| Tag omission | <map>: neither tag can be omitted. <area>: void element, no end tag |
| Permitted parents | <map>: any element that accepts phrasing content. <area>: must be inside a <map> |
| DOM interfaces | HTMLMapElement, HTMLAreaElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
<map>
| Attribute | Description |
|---|---|
| name | Required. The name an image’s usemap="#name" refers to |
<area>
| Attribute | Description |
|---|---|
| shape | rect, circle, poly or default (the whole image) |
| coords | Pixel coordinates: x1,y1,x2,y2 for rect, x,y,radius for circle, x1,y1,x2,y2,… for poly |
| href | Where the region links to |
| alt | Text describing the link, required when there is an href |
| target / download / rel | Work the same as on an <a> link |
Common examples
A clickable floor plan
Each <area> is a link with a shape, coordinates and alt text.
Circles and polygons
Use circle (x, y, radius) for round spots and poly (a list of x,y points) for irregular shapes.
A text alternative under the image
Repeat the links as a normal list so everyone can reach them, including on small screens.
Image maps vs SVG links
Image map coordinates are in pixels, so they stop matching when the image is resized on a phone — unless you add JavaScript to rescale them. You also can’t style an <area> or show a hover effect.
An inline SVG solves both problems: shapes scale with the image, and each one can be wrapped in a link and styled with CSS hover and focus effects. For new interactive diagrams and maps, SVG is usually the better choice; image maps remain fine for quick, fixed-size images.
| Image map | SVG with links | |
|---|---|---|
| Scales with the image | No (needs JS) | Yes |
| Hover & focus styles | No | Yes |
| Effort | Quick | More setup |
Common mistakes to avoid
- Missing alt text on areas. Each
<area>with anhrefneedsalt, or screen reader users hear nothing useful. - Forgetting the
#inusemap. It must beusemap="#name", matching<map name="name">. - Coordinates measured on the wrong size. Measure on the image at its real pixel size, not a scaled-down preview.
- Using an image map on a responsive image. The clickable spots drift away from the picture when it shrinks.
Accessibility & SEO tips
- Search engines follow
<area href>links, but a plain text list of the same links is clearer for both visitors and crawlers. - Keep each clickable area big enough to tap with a finger — at least about 44 × 44 pixels.
- Image maps give no visual hint that spots are clickable, so add labels or numbers on the image itself.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.