HTML Guides for image maps
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
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
- Remove the shape attribute from any <a> elements.
- Create a <map> element with a unique name attribute.
- Inside the <map>, add <area> elements with the appropriate shape, coords, href, and alt attributes.
- 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>
| Value | Description | coords format |
|---|---|---|
| rect | A rectangle | x1,y1,x2,y2 |
| circle | A circle | centerX,centerY,radius |
| poly | A polygon defined by multiple points | x1,y1,x2,y2,...,xn,yn |
| default | The entire image area not covered by other shapes | No coords needed |
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.
Ready to validate your sites?
Start your free trial today.