**`<map>`** links to an `<img>` via matching **`name`**/**`usemap`** attributes (note the `#` prefix on `usemap`, referencing the map's name like an anchor), and contains one or more `<area>` children, each defining a clickable region with specific pixel coordinates. This technique — an 'image map' — lets a single image act like several different links depending on where the user clicks, such as a diagram where clicking different parts of a building floor plan navigates to different pages.
1Understanding <map>
`<map>` links to an <img> via matching `name`/`usemap` attributes (note the # prefix on usemap, referencing the map's name like an anchor), and contains one or more <area> children, each defining a clickable region with specific pixel coordinates. This technique — an 'image map' — lets a single image act like several different links depending on where the user clicks, such as a diagram where clicking different parts of a building floor plan navigates to different pages.
Image maps with hardcoded pixel coordinates don't adapt well to responsive/resized images — if the image is scaled by CSS, the clickable areas won't line up correctly, which is why image maps are much less common on modern responsive sites than they were in the past.
<img src="/world-map.png" usemap="#worldmap" alt="World map">
<map name="worldmap">
<area shape="rect" coords="34,44,270,350" href="/regions/americas" alt="Americas">
<area shape="rect" coords="290,44,540,300" href="/regions/europe" alt="Europe">
</map>2Practical Example
Here is a real-world application of <map> showing how it is used in production HTML.
<!-- A circular clickable area -->
<area shape="circle" coords="100,100,50" href="/details" alt="Highlighted zone">3Best Practices
Follow these guidelines when working with <map>:
1. Use image maps only for genuinely irregular clickable regions an image demands (like a geographic map or diagram)
2. Always give each <area> descriptive alt text for accessibility
3. Consider whether separate, individually-linked images or SVG with real HTML elements would be more responsive-friendly instead
Tip: Image maps with hardcoded pixel coordinates don't adapt well to responsive/resized images — if the image is scaled by CSS, the clickable areas won't line up correctly, which is why image maps are much less common on modern responsive sites than they were in the past.
<img src="/world-map.png" usemap="#worldmap" alt="World map">
<map name="worldmap">
<area shape="rect" coords="34,44,270,350" href="/regions/americas" alt="Americas">
<area shape="rect" coords="290,44,540,300" href="/regions/europe" alt="Europe">
</map>