<map> and <area>

Syntax

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="0,0,100,100" href="/page1">
</map>

Examples

<img src="nav-diagram.png" usemap="#navmap" alt="Site navigation diagram">
<map name="navmap">
  <area shape="rect" coords="0,0,150,50" href="/home" alt="Home">
  <area shape="rect" coords="150,0,300,50" href="/about" alt="About">
</map>

<img src="world-map.png" usemap="#continents" alt="World map">
<map name="continents">
  <area shape="circle" coords="200,150,40" href="/europe" alt="Europe">
</map>

<map name="shapes">
  <area shape="poly" coords="50,10,90,90,10,90" href="/triangle-info" alt="Triangle">
</map>

Attributes

• name (string): Used on map; must match the img's usemap value
• usemap (string): Used on img; references a map by name, prefixed with #
• shape (rect | circle | poly | default): Used on area; the shape of the clickable region
• coords (string): Used on area; coordinates defining the region's boundaries

Best practices

• Always include alt text on each area for accessibility, same as a regular link
• Consider whether separate, individually styled elements (like a CSS grid of linked images) would be simpler than coordinate-based regions
• Image maps do not scale coordinates automatically with responsive images — test carefully on different screen sizes
• Keep coordinate math simple by using rect and circle shapes where possible rather than complex polygons

Browser compatibility

Related HTML documentation

Specifications & further reading

• HTML Living Standard