# Bad value “polygon” for attribute “shape” on element “area”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-polygon-for-attribute-shape-on-element-area
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `shape` attribute on an `<area>` element tells the browser what kind of clickable region to define within an image map. The HTML living standard (WHATWG) strictly limits this attribute to four values:

- **`rect`** — a rectangle, defined by four coordinates: `x1,y1,x2,y2` (top-left and bottom-right corners)
- **`circle`** — a circle, defined by three values: `x,y,r` (center point and radius)
- **`poly`** — a polygon, defined by a series of `x,y` coordinate pairs tracing the shape's vertices
- **`default`** — the entire image area (no `coords` needed)

The value `"polygon"` is a common mistake — it's intuitive and used in other contexts like SVG — but it is not valid HTML. Browsers may silently fall back to `default` or ignore the region entirely when they encounter an unrecognized `shape` value, which means users could lose the ability to click that area of the image map.

### Why this matters

- **Browser compatibility:** Browsers are not required to handle invalid `shape` values gracefully. While some may guess your intent, others may render the clickable region incorrectly or not at all.
- **Accessibility:** Screen readers and assistive technologies rely on valid markup to convey image map regions to users. An invalid `shape` value can make a region invisible to these tools, breaking keyboard navigation and alternative text announcements.
- **Standards compliance:** Using valid attribute values ensures your markup behaves predictably across all browsers and passes automated validation checks.

### How to fix it

Replace `shape="polygon"` with `shape="poly"`. The `coords` attribute syntax stays the same — a comma-separated list of `x,y` pairs representing each vertex of the polygon, in order. Coordinate values are in CSS pixels relative to the image's intrinsic (natural) dimensions.

Also ensure that each `<area>` element includes:
- An `href` attribute to make the region a link
- An `alt` attribute for accessibility (required when `href` is present)

## Examples

### Invalid: using `shape="polygon"`

```html
<img src="plan.png" usemap="#floormap" alt="Floor plan" width="400" height="300">
<map name="floormap">
  <area shape="polygon" coords="10,10,80,10,80,60,10,60" href="room-a.html" alt="Room A">
</map>
```

The validator reports: **Bad value "polygon" for attribute "shape" on element "area".**

### Fixed: using `shape="poly"`

```html
<img src="plan.png" usemap="#floormap" alt="Floor plan" width="400" height="300">
<map name="floormap">
  <area shape="poly" coords="10,10,80,10,80,60,10,60" href="room-a.html" alt="Room A">
</map>
```

Changing `"polygon"` to `"poly"` resolves the error. The four coordinate pairs (`10,10`, `80,10`, `80,60`, `10,60`) define a rectangular polygon. The browser automatically closes the shape by connecting the last point back to the first.

### Reference: all valid `shape` values

```html
<img src="diagram.png" usemap="#shapes" alt="Shape examples" width="500" height="400">
<map name="shapes">
  <!-- Rectangle: top-left (10,10) to bottom-right (100,80) -->
  <area shape="rect" coords="10,10,100,80" href="rect.html" alt="Rectangle region">

  <!-- Circle: center (200,60), radius 40 -->
  <area shape="circle" coords="200,60,40" href="circle.html" alt="Circle region">

  <!-- Polygon: triangle with three vertices -->
  <area shape="poly" coords="350,10,400,80,300,80" href="triangle.html" alt="Triangle region">

  <!-- Default: covers any area not claimed by other regions -->
  <area shape="default" href="elsewhere.html" alt="Everything else">
</map>
```

This example demonstrates all four valid `shape` values with their corresponding `coords` syntax. Note that `default` does not require a `coords` attribute since it covers the remainder of the image.