HTML coords Attribute

The HTML coords attribute defines the coordinates of a clickable area (a "hotspot") in a client-side image map. It is used on the <area> element, inside a <map>.

The coords value is meaningless on its own — it is always interpreted according to the shape attribute on the same <area>. The same numbers mean different things for a rectangle, a circle, or a polygon, so coords and shape must always be set together.

How the coordinate system works

Coordinates are measured in CSS pixels, relative to the rendered image:

The origin 0,0 is the top-left corner of the image.
x increases to the right, y increases downward.
The bottom-right corner of the image is at width,height — so for a 250×150 image the largest valid coordinate is roughly 250,150.

Because coordinates are tied to the rendered size, an image map is only accurate at the size the coordinates were measured for. If you scale the image with CSS (a different width/height, a responsive layout, or zoom), the hotspots no longer line up with the picture. Image maps therefore work best on a fixed-size image.

Values

The format of coords depends entirely on the shape:

`shape` value	`coords` format	Meaning
`rect`	`x1,y1,x2,y2`	Top-left corner `(x1, y1)` and bottom-right corner `(x2, y2)`. You must have `x1 < x2` and `y1 < y2`.
`circle`	`x,y,radius`	Center `(x, y)` and the `radius` in pixels.
`poly`	`x1,y1,x2,y2,...,xn,yn`	A list of corner points. The browser automatically closes the shape by joining the last point back to the first.
`default`	(none)	The whole image. `default` is a value of `shape`, not of `coords` — an `<area shape="default">` takes no `coords`.

A common bug is giving rect its corners in the wrong order. coords="90,90,35,55" is invalid because x1 > x2 and y1 > y2; written correctly that rectangle is coords="35,55,90,90".

Syntax

<area shape="rect" coords="x1,y1,x2,y2">

Examples of the HTML coords Attribute

The example below uses one rect, two circles, and one poly area on the same image:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo or on one of the logo item to watch it closer:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"  width="250" height="150" alt="block" usemap="#blockmap" />
    <map name="blockmap">
      <!-- circle: center x,y and radius -->
      <area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
      <area shape="circle" coords="195,32,28" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
      <!-- rect: top-left x1,y1 then bottom-right x2,y2 (x1<x2, y1<y2) -->
      <area shape="rect" coords="35,55,90,90" alt="php" href="https://www.w3docs.com/" />
      <!-- poly: a triangle joining three points -->
      <area shape="poly" coords="150,80,230,80,190,140" alt="js" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>

Try it Yourself »

Note: Always give every <area> a meaningful alt value — it is the only text a screen reader has for that hotspot.

A note on accessibility

Client-side image maps are a legacy technique and come with real caveats. Hotspots are not always reliably reachable by keyboard, their meaning depends on a precise alt for each <area>, and the coordinates break whenever the image is resized or rendered at a different scale. For most modern interfaces it is better to lay out individually styled, focusable links or buttons over (or beside) the image, which stay accessible and responsive. Reach for coords and image maps only when you genuinely need irregular clickable regions on a single fixed-size raster image.

<map> — defines the image map that groups the <area> elements.
<area> — the element coords is set on.
alt attribute — the accessible text for each area.

Practice

What is the function of the 'coords' attribute in HTML and how is it used?

The 'coords' attribute in HTML is used for setting the coordinates of the hotspot region in a client-side image-map.The 'coords' attribute in HTML determines the color of an element.It is used with the 'area' tag and the value of the 'coords' attribute depends on the 'shape' attribute.The 'coords' attribute works independently and does not depend on the 'shape' attribute.The format of the 'coords' value depends on the 'shape': 'rect' uses x1,y1,x2,y2, 'circle' uses x,y,radius, and 'poly' uses a list of points.'circle', 'rect', 'poly' and 'default' are all valid values of the 'coords' attribute.