HTML Guide for poly

Bad value “polygon” for attribute “shape” on element “area”.

“polygon” is not a valid value for the shape attribute on an area element; the correct value is poly.

The area element defines clickable regions inside an image map via usemap. Its shape attribute only accepts rect, circle, poly, or default per the HTML standard. When using poly, list the coords as comma-separated x,y pairs in order around the polygon. Coordinate values are CSS pixels relative to the image’s intrinsic dimensions. Always include an alt for accessibility and an href to make the region interactive. If the region is a circle or rectangle, use circle or rect with the appropriate coordinate syntax.

HTML Examples

Example showing the issue

<!doctype html>
<html lang="en">
<head>
  <title>Image Map - Invalid</title>
</head>
<body>
  <img src="plan.png" usemap="#map1" alt="Floor plan">
  <map name="map1">
    <area shape="polygon" coords="10,10,80,10,80,60,10,60" href="room-a.html" alt="Room A">
  </map>
</body>
</html>

Corrected example

<!doctype html>
<html lang="en">
<head>
  <title>Image Map - Valid</title>
</head>
<body>
  <img src="plan.png" usemap="#map1" alt="Floor plan">
  <map name="map1">
    <area shape="poly" coords="10,10,80,10,80,60,10,60" href="room-a.html" alt="Room A">
  </map>
</body>
</html>