HTML Guides for area

The target attribute on the <area> element tells the browser where to display the linked resource — in the current tab, a new tab, a parent frame, or a named <iframe>. According to the WHATWG HTML living standard, a valid navigable target must be either a keyword beginning with an underscore (_self, _blank, _parent, _top) or a name that is at least one character long. An empty string ("") satisfies neither condition, so the W3C validator reports:

Bad value “” for attribute “target” on element “area”: Browsing context name must be at least one character long.

This commonly happens when templating engines or CMS platforms output target="" as a default, or when a value is conditionally set but the logic fails to produce a result.

Why this matters

• Standards compliance. An empty target violates the HTML specification and produces a validation error.
• Unpredictable browser behavior. While most browsers treat an empty target the same as _self, this is not guaranteed by the spec. Relying on undefined behavior can lead to inconsistencies across browsers or future versions.
• Code clarity. An empty target signals unclear intent. Removing it or using an explicit keyword makes the code easier to understand and maintain.

How to fix it

1. Remove the target attribute if you want the link to open in the same browsing context. This is the default behavior, equivalent to target="_self".
2. Use a valid keyword like _self, _blank, _parent, or _top if you need specific navigation behavior.
3. Use a named browsing context (e.g., target="contentFrame") if you want to direct the link to a specific <iframe> or window. The name must be at least one character long.
4. Fix your template logic if the empty value is being generated dynamically. Ensure the target attribute is only rendered when a non-empty value is available.

Examples

Invalid: empty target attribute

This triggers the validation error because target is set to an empty string:

<img src="floor-plan.png" usemap="#rooms" alt="Floor plan">
<map name="rooms">
  <area shape="rect" coords="10,10,100,60" href="/kitchen" alt="Kitchen" target="">
</map>

Fixed: remove target for default behavior

If you want the link to open in the same tab (the default), simply remove the target attribute:

<img src="floor-plan.png" usemap="#rooms" alt="Floor plan">
<map name="rooms">
  <area shape="rect" coords="10,10,100,60" href="/kitchen" alt="Kitchen">
</map>

Fixed: use a valid keyword

Use _self to be explicit about same-tab navigation, or _blank to open in a new tab:

<img src="floor-plan.png" usemap="#rooms" alt="Floor plan">
<map name="rooms">
  <area shape="rect" coords="10,10,100,60" href="/kitchen" alt="Kitchen" target="_self">
  <area shape="rect" coords="110,10,200,60" href="/bedroom" alt="Bedroom" target="_blank">
</map>

Fixed: target a named <iframe>

If you want to load the linked resource into a specific <iframe>, give the <iframe> a name attribute and reference it in target:

<iframe name="detailView" src="about:blank" title="Room details"></iframe>
<img src="floor-plan.png" usemap="#rooms" alt="Floor plan">
<map name="rooms">
  <area shape="rect" coords="10,10,100,60" href="/kitchen" alt="Kitchen" target="detailView">
</map>

Fixed: conditionally render target in templates

If your target value comes from a variable, make sure the attribute is only output when the value is non-empty. For example, in a Jinja-style template:

<area shape="rect" coords="10,10,100,60" href="/kitchen" alt="Kitchen"
  {% if target_value %} target="{{ target_value }}"{% endif %}>

This prevents target="" from appearing in your HTML when no value is set.

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.

The <area> element defines a clickable region within an <map> element, which is used with images to create image maps. When an <area> element includes an href attribute, the browser treats it as a hyperlink. The value of href must be a valid URL, and http:// alone fails validation because the URL specification requires a host after the :// separator. An empty host is not permitted.

This matters for several reasons. Browsers may handle malformed URLs unpredictably — some might ignore the link, others might attempt navigation to a nonsensical destination, and others might throw a network error. Screen readers and other assistive technologies rely on valid href values to announce links correctly and provide meaningful navigation to users. From a standards compliance perspective, the WHATWG URL Standard explicitly rejects URLs with empty hosts, and the W3C validator flags this as an error.

This issue commonly appears when placeholder URLs are left in during development, when CMS tools generate incomplete markup, or when a URL value is dynamically constructed but the host portion ends up empty.

How to fix it

• If the area should link somewhere, replace http:// with the full, intended URL including the host (e.g., https://example.com/page).
• If the area is a temporary placeholder, use href="#" to create a valid no-op link, though be aware this will scroll the page to the top when clicked.
• If the area shouldn’t be interactive, remove the href attribute entirely. Without href, the <area> element is not a hyperlink and won’t be clickable.

Examples

Invalid: empty host in URL

The value http:// has no host, which triggers the validation error.

<img src="diagram.png" alt="Site map" usemap="#siteMap">
<map name="siteMap">
  <area shape="rect" coords="30,23,183,191" href="http://" alt="Home page">
</map>

Fixed: complete URL with a valid host

Providing a full URL with a host resolves the error.

<img src="diagram.png" alt="Site map" usemap="#siteMap">
<map name="siteMap">
  <area shape="rect" coords="30,23,183,191" href="https://example.com/" alt="Home page">
</map>

Fixed: placeholder link with #

If you need the area to remain clickable but don’t have a destination yet, href="#" is a valid placeholder.

<img src="diagram.png" alt="Site map" usemap="#siteMap">
<map name="siteMap">
  <area shape="rect" coords="30,23,183,191" href="#" alt="Home page">
</map>

Fixed: non-interactive area without href

If the area doesn’t need to be a link, simply omit the href attribute.

<img src="diagram.png" alt="Site map" usemap="#siteMap">
<map name="siteMap">
  <area shape="rect" coords="30,23,183,191" alt="Home page">
</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.

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.