map

The HTML <map> element groups clickable regions for an image map. It connects an <img> to one or more <area> links.

Basic example

<img src="campus.png" alt="Campus map" usemap="#campus-map">
<map name="campus-map">
  <area shape="rect" coords="0,0,120,80"
        href="library.html" alt="Library">
  <area shape="circle" coords="220,60,35"
        href="cafe.html" alt="Cafe">
</map>

The value in usemap begins with # and must match the map’s name. Each area then defines a shape, coordinates, destination, and alternative label.

map groups; area does the linking

map is the container for the regions. It does not define clickable behavior by itself. The area elements inside it create the individual links.

Accessibility and alternatives

• Give the img useful alternative text that explains the whole image’s purpose.
• Give each linked area an alt that names its destination.
• Provide ordinary text links when the image map contains important navigation.
• Check keyboard navigation and do not rely only on color or visual coordinates.

Common mistakes

• Forgetting the leading # in usemap.
• Using a different map name than the image reference.
• Leaving linked regions without useful alt text.
• Using an image map where a normal list of links would be clearer.

Related pages

• area: create a clickable image region
• img: embed an image
• alt: provide alternative text
• HTML reference index