# The element “img” with the attribute “usemap” must not appear as a descendant of the “a” element.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-element-img-with-the-attribute-usemap-must-not-appear-as-a-descendant-of-the-a-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

```html
<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>
```