The “shape” attribute on the “a” element is obsolete. Use “area” instead of “a” for image maps.

In older versions of HTML, the <a> element supported a shape attribute (with values like rect, circle, poly, and default) to define clickable hotspot regions within an image map. This feature was removed from the HTML specification, and the shape attribute is now considered obsolete on <a> elements.

The modern and correct way to create image maps is to use the <map> element containing one or more <area> elements. Each <area> element accepts a shape attribute along with coords to define clickable regions, and an href to specify the link destination. The <img> element is then associated with the map via its usemap attribute.

Why this matters

• Standards compliance: The shape attribute on <a> is not part of the current HTML living standard. Using it produces a validation error and relies on deprecated behavior that browsers are not required to support.
• Browser compatibility: Modern browsers implement image maps through <map> and <area>. Using the obsolete <a shape="..."> syntax may not work reliably across browsers.
• Accessibility: The <area> element is designed to work with assistive technologies in the context of image maps. It supports the alt attribute, which provides text alternatives for each clickable region — something essential for screen reader users.

How to fix it

1. Remove the shape attribute from any <a> elements.
2. Create a <map> element with a unique name attribute.
3. Inside the <map>, add <area> elements with the appropriate shape, coords, href, and alt attributes.
4. Associate the map with an <img> element using the usemap attribute, referencing the map’s name with a # prefix.

Examples

Incorrect: using shape on an <a> element

<img src="workspace.png" usemap="#workspace" alt="Workspace diagram" width="400" height="300">
<map name="workspace">
  <a shape="rect" coords="0,0,200,150" href="/monitor.html">Monitor</a>
  <a shape="circle" coords="300,200,50" href="/lamp.html">Desk lamp</a>
</map>

This triggers the validation error because the shape attribute is obsolete on <a> elements.

Correct: using <area> elements instead

<img src="workspace.png" usemap="#workspace" alt="Workspace diagram" width="400" height="300">
<map name="workspace">
  <area shape="rect" coords="0,0,200,150" href="/monitor.html" alt="Monitor">
  <area shape="circle" coords="300,200,50" href="/lamp.html" alt="Desk lamp">
</map>

Each <area> element defines a clickable region with shape and coords, links to a destination with href, and provides an accessible label with alt. The <area> element is a void element (no closing tag needed), and the alt attribute is required when href is present.

Supported shape values on <area>

Example with multiple shape types

<img src="floorplan.png" usemap="#floorplan" alt="Office floor plan" width="600" height="400">
<map name="floorplan">
  <area shape="rect" coords="10,10,200,150" href="/conference-room.html" alt="Conference room">
  <area shape="circle" coords="400,300,60" href="/break-room.html" alt="Break room">
  <area shape="poly" coords="300,10,350,80,250,80" href="/lobby.html" alt="Lobby">
  <area shape="default" href="/office-overview.html" alt="General office area">
</map>

This example demonstrates all four shape types working together in a single image map, with proper alt text for each clickable region.

Learn more:

MDN Reference

MDN: area element

→