HTML coords Attribute

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read

Definition

The coords attribute details the coordinates of the relevant shape attribute.

Applicable Elements

The coords attribute can be used with the following elements:

HTML <area> coords Attribute

The <area> tag defines predefined clickable areas within an image map. This allows areas on an image to be associated with a link.

The coords attribute can only be used with the <area> element. It specifies the coordinates of the relevant shape attribute.

Syntax

<area shape="rect" coords="20,20,80,80">

Usage

The coords attribute details the coordinates of the relevant shape attribute.

  • rect takes the values x1,y1,x2,y2 which specify the coordinates of the top-left and bottom-right corner of the rectangle. It must have exactly four integers as the coordinates.

    <area shape="rect" coords="20,20,80,80" href="#" target="_blank" alt="Rectangle">

  • circle takes the values x,y,radius which specifies the coordinates of the circle center and the radius.

    <area shape="circle" coords="150,180,50" href="#" target="_blank" alt="Circle">

  • poly takes the values x1,y1,x2,y2,..,xn,yn and specifies the coordinates of each point of the polygon. To close the polygon, the first and last coordinates must be identical. It must have at least six integers as the coordinates.

    <area shape="polygon" coords="10,10,25,30,89,78,20,80,10,10" href="#" target="_blank" alt="Polygon">

  • default takes no value, and defines the whole image.

Values

Values can include:

  • A list of coordinates for the relevant shape attribute. See above for examples.

Examples

See the Usage section above for examples for each shape.

The example below shows how you can highlight certain parts of an image:

<img src="https://res.cloudinary.com/thewebmaster/image/upload/f_auto,q_auto,w_600/image/moon-earth.png"
width="600"
height="337.5"
alt="Area Tag Demo."
usemap="#workmap"></img>

<map name="workmap">
  <area shape="circle" coords="178,171,133" alt="Earth" href="https://en.wikipedia.org/wiki/Earth" target="_blank">
  <area shape="circle" coords="455,130,80" alt="Moon" href="https://en.wikipedia.org/wiki/Moon" target="_blank">
</map>

Specification

The coords HTML specification for the <area> element is as follows:

Browser Support

The coords attribute has the following browser support:

Desktop

ChromeEdgeFirefoxIEOperaSafari
coordsYesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
coordsYesYesYesYesYesYes