HTML coords Attribute

The HTML coords attribute defines the coordinates of a clickable region inside an image map. It is used on the <area> element together with the shape attribute to determine the size and position of the interactive area.

Syntax

The coords attribute is specified on an <area> element inside a <map>. The format of the coordinates depends on the value of the shape attribute.

<area shape="rect" coords="0,0,200,250" href="/index-html.html" alt="HTML Tutorials">

The coordinates are measured in CSS pixels from the top-left corner of the image associated with the image map.

Attribute Values

The coords attribute contains a comma-separated list of numbers. The number and meaning of those values depend on the area's shape.

Shape	Coordinate Format	Description
`rect`	`x1,y1,x2,y2`	Defines the top-left and bottom-right corners of a rectangle.
`circle`	`x,y,radius`	Defines the center point and radius of a circle.
`poly`	`x1,y1,x2,y2,...`	Defines a polygon using a series of coordinate pairs.
`default`	Not used	Represents the entire image area not covered by another defined area.

Elements That Use the coords Attribute

The coords attribute is currently valid on the <area> element. Earlier versions of HTML also allowed coords on the <a> element, but that use is obsolete.

Element	Status	Description
`<area>`	Current	Defines the coordinates of an interactive region within an image map.
`<a>`	Obsolete	Formerly defined the coordinates of a hyperlink region in an image map. Use the `<area>` element instead in modern HTML.

Rectangle Coordinates

For shape="rect", the coords attribute contains four values representing the left, top, right, and bottom edges of the rectangular area.

<area shape="rect" coords="0,0,200,250" href="/index-html.html" alt="HTML Tutorials">

The first two values identify the top-left corner, and the last two values identify the bottom-right corner.

Circle Coordinates

For shape="circle", three values define the horizontal and vertical position of the center point followed by the radius.

<area shape="circle" coords="100,100,50" href="/index-html.html" alt="HTML Tutorials">

In this example, the circle is centered at 100,100 and has a radius of 50 pixels.

Polygon Coordinates

For shape="poly", the coords attribute contains a series of coordinate pairs representing the vertices of the polygon.

<area shape="poly" coords="50,20,180,20,220,120,120,220,20,120" href="/index-html.html" alt="HTML Tutorials">

Each pair represents one point of the polygon. At least three coordinate pairs are needed to define a polygonal region.

Default Shape

When shape="default" is used, the area represents the portion of the image not covered by another defined area. The coords attribute must not be specified for a default area.

<area shape="default" href="/index.html" alt="Home">

How Image Coordinates Work

Image-map coordinates begin at the top-left corner of the image. The horizontal coordinate increases from left to right, while the vertical coordinate increases from top to bottom.

0,0 ───────────────► x
 │
 │
 │
 ▼
 y

For example, a 400 × 250 image can be divided vertically into two rectangular areas. The first can cover the left 200 pixels and the second can cover the remaining 200 pixels.

<area shape="rect" coords="0,0,200,250" href="/index-html.html" alt="HTML Tutorials">
<area shape="rect" coords="200,0,400,250" href="/index-css.html" alt="CSS Tutorials">

Common Mistakes

Make sure the number of coordinate values matches the selected shape. A rectangle requires four values, a circle requires three, and a polygon requires coordinate pairs for its vertices.

Do not specify coords when using shape="default".

Remember that the coordinates correspond to the image's intrinsic coordinate system. If an image map is used with an image that is visually resized, the clickable regions may no longer align with the displayed image as expected.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The coords attribute on the <area> element is widely supported in current core browsers. Its former use on the <a> element is obsolete and should not be used in modern HTML.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the coords Attribute

The example divides a 400 × 250 image into two rectangular clickable areas. The left side links to the HTML tutorials, while the right side links to the CSS tutorials.

Play in Editor

Summary

The HTML coords attribute defines the position and dimensions of an interactive <area> inside an image map. Its values depend on the accompanying shape attribute: rectangles use four coordinates, circles use a center point and radius, and polygons use a series of coordinate pairs. A default area does not use the coords attribute.