References

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

The HTML coords attribute

Attribute All modern browsers Updated
Quick answer

The HTML coords attribute defines the coordinates of a clickable region in an image map, interpreted according to its shape. It is used on the <area> element.

Overview

The coords attribute sets the coordinates 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="circle" coords="75,75,50" href="/sun" alt="Sun">

Values

Value
Comma-separated numbers — x,y,radius for circle; x1,y1,x2,y2 for rect; a list of x,y pairs for poly.

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 coords attribute do?
Sets the coordinates 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 coords attribute?
It is an element-specific attribute, used on <area> elements within an image <map>.
controls crossorigin