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, each with matching coords, plus default, which covers the whole image and takes no coords.
Which elements use the shape attribute?
It is an element-specific attribute, used on <area> elements within an image <map>.
shadowrootserializable size