Guías HTML para forma

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.

In older versions of HTML, the <a> element supported a shape attribute (with values like rect, circle, poly, and default) to define clickable hotspot regions within an image map. This feature was removed from the HTML specification, and the shape attribute is now considered obsolete on <a> elements.

The modern and correct way to create image maps is to use the <map> element containing one or more <area> elements. Each <area> element accepts a shape attribute along with coords to define clickable regions, and an href to specify the link destination. The <img> element is then associated with the map via its usemap attribute.

Why this matters

• Standards compliance: The shape attribute on <a> is not part of the current HTML living standard. Using it produces a validation error and relies on deprecated behavior that browsers are not required to support.
• Browser compatibility: Modern browsers implement image maps through <map> and <area>. Using the obsolete <a shape="..."> syntax may not work reliably across browsers.
• Accessibility: The <area> element is designed to work with assistive technologies in the context of image maps. It supports the alt attribute, which provides text alternatives for each clickable region — something essential for screen reader users.

How to fix it

1. Remove the shape attribute from any <a> elements.
2. Create a <map> element with a unique name attribute.
3. Inside the <map>, add <area> elements with the appropriate shape, coords, href, and alt attributes.
4. Associate the map with an <img> element using the usemap attribute, referencing the map’s name with a # prefix.

Examples

Incorrect: using shape on an <a> element

<img src="workspace.png" usemap="#workspace" alt="Workspace diagram" width="400" height="300">
<map name="workspace">
  <a shape="rect" coords="0,0,200,150" href="/monitor.html">Monitor</a>
  <a shape="circle" coords="300,200,50" href="/lamp.html">Desk lamp</a>
</map>

This triggers the validation error because the shape attribute is obsolete on <a> elements.

Correct: using <area> elements instead

<img src="workspace.png" usemap="#workspace" alt="Workspace diagram" width="400" height="300">
<map name="workspace">
  <area shape="rect" coords="0,0,200,150" href="/monitor.html" alt="Monitor">
  <area shape="circle" coords="300,200,50" href="/lamp.html" alt="Desk lamp">
</map>

Each <area> element defines a clickable region with shape and coords, links to a destination with href, and provides an accessible label with alt. The <area> element is a void element (no closing tag needed), and the alt attribute is required when href is present.

Supported shape values on <area>

Example with multiple shape types

<img src="floorplan.png" usemap="#floorplan" alt="Office floor plan" width="600" height="400">
<map name="floorplan">
  <area shape="rect" coords="10,10,200,150" href="/conference-room.html" alt="Conference room">
  <area shape="circle" coords="400,300,60" href="/break-room.html" alt="Break room">
  <area shape="poly" coords="300,10,350,80,250,80" href="/lobby.html" alt="Lobby">
  <area shape="default" href="/office-overview.html" alt="General office area">
</map>

This example demonstrates all four shape types working together in a single image map, with proper alt text for each clickable region.