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

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-shape-attribute-on-the-a-element-is-obsolete-use-area-instead-of-a-for-image-maps
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

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

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

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