References

Beginner-friendly references for web development, with live, editable examples.

The HTML shape attribute

Attribute All modern browsers Updated
Quick answer

The HTML shape attribute defines the shape of a clickable region in an image map. It is used on the <area> element.

Overview

The shape attribute sets the shape of an image-map area. It is used on <area> elements within an image <map>.

It defines the geometry of a clickable hotspot in an image <map> — the shape and its coordinates. Image maps are niche; CSS-positioned links or an inline <svg> are often more flexible.

Syntax

<area shape="rect" coords="0,0,100,100" href="/box" alt="Box">

Values

Value
rect | circle | poly | default

Best practices

  • Match the shape (rect, circle, poly) to the right coords.
  • Give every <area> meaningful alt text.
  • Connect the <map> to its image via usemap and a matching name.
  • Consider overlaid links or an inline <svg> for responsive, accessible hotspots.

Frequently asked questions

What does the shape attribute do?
Sets the shape of an image-map area.
How do I define a clickable region on an image?
Add an <area> with a shape and coords inside a <map> linked by usemap.
What shapes can an image-map area be?
rect, circle, poly or default, each with matching coords.
Which elements use the shape attribute?
It is an element-specific attribute, used on <area> elements within an image <map>.
shadowrootserializable size