HTML Guides for image map

The path in an <area> element's href can't contain a literal space, so write each space as %20 or take it out of the URL.

An <area> defines one clickable region of an image map. The <map> element groups the areas under a name, and an <img> points to that map with usemap="#name". An <area> with an href is a link, and the URL Standard doesn't allow spaces anywhere in a URL path. The usual cause is a page or file name with a space in it, like /islands/north island.

Browsers percent-encode the space before following the link, so the click usually still works. A crawler or a script that reads the raw value may not, and the markup is invalid either way.

Replace each space with %20. If you control the target URLs, hyphens (north-island) make cleaner addresses that need no encoding at all. A space after the ? triggers a different message, Illegal character in query, and %20 fixes that one too.

Every <area> with an href also needs an alt attribute. Screen readers announce it as the link text for that region, and the validator reports a missing one as a separate error.

Invalid example

<img src="islands.png" alt="Map of the islands" usemap="#islands" width="600" height="400">

<map name="islands">

<area shape="rect" coords="20,40,180,160" href="/islands/north island" alt="North Island">

<area shape="rect" coords="220,200,400,320" href="/islands/south island" alt="South Island">

</map>

Valid example: spaces encoded as %20

<img src="islands.png" alt="Map of the islands" usemap="#islands" width="600" height="400">

<map name="islands">

<area shape="rect" coords="20,40,180,160" href="/islands/north%20island" alt="North Island">

<area shape="rect" coords="220,200,400,320" href="/islands/south%20island" alt="South Island">

</map>

Valid example: hyphens instead of spaces

<img src="islands.png" alt="Map of the islands" usemap="#islands" width="600" height="400">

<map name="islands">

<area shape="rect" coords="20,40,180,160" href="/islands/north-island" alt="North Island">

<area shape="rect" coords="220,200,400,320" href="/islands/south-island" alt="South Island">

</map>

An <img> with a usemap attribute is interactive content, so it can't be placed inside an <a> element.

The usemap attribute connects the image to a <map>, whose <area> elements define clickable regions, each usually with its own href. That makes the image interactive, and the HTML specification doesn't allow interactive content anywhere inside an <a>, whether or not the link has an href. A plain <img> without usemap is fine inside a link, which is why the validator names the attribute.

Wrapping an image map in a link puts links inside a link. A click on a region could follow the region's href or the outer link's, depending on the browser, and screen readers may announce the regions as links nested inside another link.

Decide which behavior the image needs. If the regions matter, move the image out of the <a>, and add a separate link next to it if you still want one to the whole destination. If the image only needs to be a single link, remove the usemap attribute and the unused <map>.

Invalid example

<a href="/regions">

<img src="regions.png" alt="Regions" usemap="#regions" width="200" height="300">

</a>

<map name="regions">

<area shape="rect" coords="0,0,200,150" href="/north" alt="North region">

<area shape="rect" coords="0,150,200,300" href="/south" alt="South region">

</map>

Valid example

<img src="regions.png" alt="Regions" usemap="#regions" width="200" height="300">

<map name="regions">

<area shape="rect" coords="0,0,200,150" href="/north" alt="North region">

<area shape="rect" coords="0,150,200,300" href="/south" alt="South region">

</map>

<p><a href="/regions">View all regions</a></p>

An image's usemap attribute points to a <map> by name, and the page has no <map> whose name matches the text after the #.

The value of usemap is a hash-name reference: a # followed by the name of a <map> element in the same document. The <area> elements inside that map define the clickable regions of the image, so usemap="#floor-plan" needs a <map name="floor-plan"> somewhere on the page.

The validator compares the two values exactly, so <map name="Floor-Plan"> doesn't match. A name that repeats the # (name="#floor-plan") doesn't match either, because the # belongs only in usemap. And a <map> with only id="floor-plan" won't do: name is required on <map>, and the validator reports its absence as a separate error.

If the page has no matching map at all, browsers show a plain image with no clickable regions, and visitors never see the links the map was supposed to provide. This often happens when an image is copied from another page, or inserted by a CMS, without the <map> that went with it.

Add the missing <map>, or fix the existing map's name so it matches the usemap value character for character. If the image doesn't need clickable regions, remove the usemap attribute instead.

Invalid example

<img src="floor-plan.png" alt="Office floor plan" width="400" height="300" usemap="#floor-plan">

<map name="Floor-Plan">

<area shape="rect" coords="0,0,200,300" href="/rooms/kitchen" alt="Kitchen">

<area shape="rect" coords="200,0,400,300" href="/rooms/meeting-room" alt="Meeting room">

</map>

Valid example

<img src="floor-plan.png" alt="Office floor plan" width="400" height="300" usemap="#floor-plan">

<map name="floor-plan">

<area shape="rect" coords="0,0,200,300" href="/rooms/kitchen" alt="Kitchen">

<area shape="rect" coords="200,0,400,300" href="/rooms/meeting-room" alt="Meeting room">

</map>