Guias HTML para poly

The shape attribute on an <area> element tells the browser what kind of clickable region to define within an image map. The HTML living standard (WHATWG) strictly limits this attribute to four values:

• rect — a rectangle, defined by four coordinates: x1,y1,x2,y2 (top-left and bottom-right corners)
• circle — a circle, defined by three values: x,y,r (center point and radius)
• poly — a polygon, defined by a series of x,y coordinate pairs tracing the shape’s vertices
• default — the entire image area (no coords needed)

The value "polygon" is a common mistake — it’s intuitive and used in other contexts like SVG — but it is not valid HTML. Browsers may silently fall back to default or ignore the region entirely when they encounter an unrecognized shape value, which means users could lose the ability to click that area of the image map.

Why this matters

• Browser compatibility: Browsers are not required to handle invalid shape values gracefully. While some may guess your intent, others may render the clickable region incorrectly or not at all.
• Accessibility: Screen readers and assistive technologies rely on valid markup to convey image map regions to users. An invalid shape value can make a region invisible to these tools, breaking keyboard navigation and alternative text announcements.
• Standards compliance: Using valid attribute values ensures your markup behaves predictably across all browsers and passes automated validation checks.

How to fix it

Replace shape="polygon" with shape="poly". The coords attribute syntax stays the same — a comma-separated list of x,y pairs representing each vertex of the polygon, in order. Coordinate values are in CSS pixels relative to the image’s intrinsic (natural) dimensions.

Also ensure that each <area> element includes:

• An href attribute to make the region a link
• An alt attribute for accessibility (required when href is present)

Examples

Invalid: using shape="polygon"

<img src="plan.png" usemap="#floormap" alt="Floor plan" width="400" height="300">
<map name="floormap">
  <area shape="polygon" coords="10,10,80,10,80,60,10,60" href="room-a.html" alt="Room A">
</map>

The validator reports: Bad value “polygon” for attribute “shape” on element “area”.

Fixed: using shape="poly"

<img src="plan.png" usemap="#floormap" alt="Floor plan" width="400" height="300">
<map name="floormap">
  <area shape="poly" coords="10,10,80,10,80,60,10,60" href="room-a.html" alt="Room A">
</map>

Changing "polygon" to "poly" resolves the error. The four coordinate pairs (10,10, 80,10, 80,60, 10,60) define a rectangular polygon. The browser automatically closes the shape by connecting the last point back to the first.

Reference: all valid shape values

<img src="diagram.png" usemap="#shapes" alt="Shape examples" width="500" height="400">
<map name="shapes">
<!-- Rectangle: top-left (10,10) to bottom-right (100,80) -->

  <area shape="rect" coords="10,10,100,80" href="rect.html" alt="Rectangle region">

<!-- Circle: center (200,60), radius 40 -->

  <area shape="circle" coords="200,60,40" href="circle.html" alt="Circle region">

<!-- Polygon: triangle with three vertices -->

  <area shape="poly" coords="350,10,400,80,300,80" href="triangle.html" alt="Triangle region">

<!-- Default: covers any area not claimed by other regions -->

  <area shape="default" href="elsewhere.html" alt="Everything else">
</map>

This example demonstrates all four valid shape values with their corresponding coords syntax. Note that default does not require a coords attribute since it covers the remainder of the image.