HTML Guide

Bad value “X1,Y1,X2,Y2” for attribute “coords” on element “area”: A circle must have three comma-separated integers. The first integer must be less than the third. A polyline must have at least six comma-separated integers.

The coordinates specified for an <area> element using the coords attribute are not in a valid format.

For a rectangle (shape="rect"), the format X1,Y1,X2,Y2 is expected, where the top-left corner is specified by X1, Y1 and the bottom-right corner is specified by X2, Y2, therefore X1 must be lower than X2, and Y1 must be lower than Y2 because the coordinates 0, 0 start at the top-left.
For a polygon (shape="poly"), the format X1,Y1,X2,Y2,...,Xn,Yn is expected to contain a list of coordinate pairs (at least 3, for a triangle).
For a circle (shape="circle"), the format X,Y,R is expected where X, Y represents the coordinates of the center of the circle (from the top-left corner), and R is the radius.

Learn more:

HTML Living Standard: the area element

Related W3C validator issues

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

target
area

Empty target on an <area> element is invalid; it must be a named browsing context (at least one character) or a valid keyword like _self, _blank, _parent, or _top.

The target attribute on hyperlinked elements such as <a> and <area> controls where to open the linked resource. It accepts either a named browsing context (e.g., target="mapFrame") or one of the standard keywords: _self (default, same frame/tab), _blank (new tab/window), _parent, or _top. An empty string "" is not allowed and causes validation errors. Choose the appropriate keyword or remove target if default behavior is desired. If you need to direct links to a specific frame or iframe, use a non-empty name and ensure the frame has a matching name attribute.

HTML Examples

Invalid example (reproduces the error)

<img src="plan.png" usemap="#site-map" alt="Site map">
<map name="site-map">
  <area shape="rect" coords="10,10,100,60" href="/about" alt="About" target="">
</map>

Fixed examples

<!-- Use a valid keyword -->

<img src="plan.png" usemap="#site-map" alt="Site map">
<map name="site-map">
  <area shape="rect" coords="10,10,100,60" href="/about" alt="About" target="_self">
</map>

<!-- Or remove target to use default behavior -->

<img src="plan.png" usemap="#site-map" alt="Site map">
<map name="site-map">
  <area shape="rect" coords="10,10,100,60" href="/about" alt="About">
</map>

<!-- Or target a named iframe -->

<iframe name="mapFrame" src="about:blank" title="Content frame"></iframe>
<img src="plan.png" usemap="#site-map" alt="Site map">
<map name="site-map">
  <area shape="rect" coords="10,10,100,60" href="/about" alt="About" target="mapFrame">
</map>

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>

Bad value “http://” for attribute “href” on element “area”: Invalid host: empty host.

An href attribute with the value http:// is not a valid URL because the host section is missing.

The href attribute in the area element must contain a valid URL. A URL requires a scheme (http or https), followed by ://, and then a valid host (such as example.com). The value http:// lacks a host, making it invalid according to URL standards and resulting in a validation error. If you don’t want the area to navigate anywhere, you can use href="#" for a placeholder or omit the href attribute entirely. To link to an actual location, provide the complete URL, including the host.

Invalid example:

<map name="myMap">
  <area shape="rect" coords="30,23,183,191" href="http://" alt="" >
</map>

Valid example with a real host:

<map name="myMap">
  <area shape="rect" coords="30,23,183,191" href="http://example.com/" alt="" >
</map>

Valid example with a placeholder, no navigation:

<map name="myMap">
  <area shape="rect" coords="30,23,183,191" href="#" alt="" >
</map>

Replace http:// with a full URL or a suitable placeholder as needed for your application.

The “shape” attribute on the “a” element is obsolete. Use “area” instead of “a” for image maps.