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