The <map> Element
As defined in the HTML Living Standard, the <map> element is used to define an image map—one or more hyperlinked areas (hotspots) on a single image.
Imagine an image of a world map where clicking on different continents takes you to different regional guides. The <map> element defines these regions.
<map name="world-map">
<area shape="rect" coords="34,44,270,350" href="north-america.html" alt="North America">
<area shape="circle" coords="500,200,50" href="europe.html" alt="Europe">
</map>
<img src="world.jpg" usemap="#world-map" alt="A map of the world">Connecting the Map to the Image
The <map> element does not render anything visually. It is linked to an <img> element via the usemap attribute.
Critical Syntax: The Hash Symbol
The usemap attribute must start with a hash symbol (#) followed by the name attribute of the map. For example: usemap="#world-map". Forgetting the hash is a common error that breaks the functionality.
Accessibility & Modern Alternatives
Image maps are notoriously difficult to make accessible and responsive.
WCAG Principle: Perceivability & Operability
Success Criterion 2.1.1 (Level A): Keyboard accessibility.
Because <area> tags are essentially links, they must be keyboard-focusable. However, since they are invisible, they can be confusing to screen reader users if the alt text is not descriptive.
A11y Tip: Use SVG Instead
In modern web development, SVG (Scalable Vector Graphics) is the preferred alternative to image maps. SVGs are natively responsive, allow for better styling via CSS, and provide a much more accessible DOM structure for screen readers.