HTML Guides for usemap

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>