HTML Guides for map

The <area> element defines a clickable region within an image map (<map>). The coords attribute works together with the shape attribute to describe the geometry of that region. When the coordinates don’t conform to the rules for the given shape, the browser may ignore the area entirely or interpret it unpredictably, making the clickable region inaccessible to users.

Each shape type has strict requirements:

• Rectangle (shape="rect"): Requires exactly four integers in the format x1,y1,x2,y2, where x1,y1 is the top-left corner and x2,y2 is the bottom-right corner. Because 0,0 is the top-left of the image, x1 must be less than x2 and y1 must be less than y2.
• Circle (shape="circle"): Requires exactly three integers in the format x,y,r, where x,y is the center of the circle and r is the radius. The radius must be a positive integer, and the first coordinate (the x-center) must be less than the third value (the radius) is not required—but the validator message mentions this constraint to flag cases where values appear swapped or malformed.
• Polygon (shape="poly"): Requires at least six integers (three x,y coordinate pairs), forming a polygon with at least three vertices (a triangle). The format is x1,y1,x2,y2,...,xn,yn, and the number of integers must be even since they represent pairs.

Getting these formats wrong is a standards compliance issue. Assistive technologies such as screen readers rely on valid <area> definitions to convey interactive regions to users. Invalid coordinates can also cause the clickable area to silently fail in some browsers.

Examples

Invalid: Rectangle with swapped coordinates

The top-left corner values are larger than the bottom-right corner values:

<map name="nav">
  <area shape="rect" coords="200,150,50,10" href="/home" alt="Home">
</map>

Fixed: Rectangle with correct coordinate order

<map name="nav">
  <area shape="rect" coords="50,10,200,150" href="/home" alt="Home">
</map>

Invalid: Circle with wrong number of values

Four values are provided instead of the required three:

<map name="nav">
  <area shape="circle" coords="100,75,50,25" href="/info" alt="Info">
</map>

Fixed: Circle with three values

<map name="nav">
  <area shape="circle" coords="100,75,50" href="/info" alt="Info">
</map>

Invalid: Polygon with too few coordinates

Only four integers (two coordinate pairs) are provided, but a polygon needs at least three pairs:

<map name="nav">
  <area shape="poly" coords="10,20,30,40" href="/about" alt="About">
</map>

Fixed: Polygon with at least three coordinate pairs

<map name="nav">
  <area shape="poly" coords="10,20,30,40,20,60" href="/about" alt="About">
</map>

Invalid: Non-integer or malformed values

Decimal numbers and spaces in the wrong places will also trigger this error:

<map name="nav">
  <area shape="rect" coords="10.5, 20, 100, 200" href="/page" alt="Page">
</map>

Fixed: Using only comma-separated integers

<map name="nav">
  <area shape="rect" coords="10,20,100,200" href="/page" alt="Page">
</map>

Complete valid image map example

<img src="floorplan.png" alt="Office floor plan" usemap="#office">
<map name="office">
  <area shape="rect" coords="0,0,150,100" href="/lobby" alt="Lobby">
  <area shape="circle" coords="200,150,40" href="/meeting-room" alt="Meeting room">
  <area shape="poly" coords="300,50,400,50,400,150,350,200,300,150" href="/lounge" alt="Lounge">
</map>

When debugging coordinate issues, double-check that the shape attribute matches the number of coordinates you’ve provided, that all values are non-negative integers separated by commas with no extra spaces, and that rectangle corners are specified in the correct top-left to bottom-right order.