HTML and CSS Reference
For details on the differences between the HTML syntax and the XHTML syntax in
HTML5, check out, “The HTML and XHTML Syntax,” on the W3C's website:
An area element must always be a descendant of the map element but doesn't have to be an immediate
child of the map element. As we mentioned earlier, the map element can have any number of descendant
elements. If it makes sense within the context of your document, you may add additional markup around
There are no required attributes for the area element.
shape and coords : specifies the shape of the area element and the coordinates of that shape.
The shape attribute accepts the following values: default , rect , circle , and polygon .
href : a URL that, when present, makes the area a clickable hyperlink.
alt : defines fallback content for the area . If the href attribute is present, the alt attribute must
also be present.
media , rel , type , target , hreflang : These attributes follow the same conventions on area
elements as they do on a elements, as discussed in the previous section on anchors.
The shape and coords attributes
The area element has two important and related attributes that define its shape, size, and location in the
image map: shape and coords .
The shape attribute is an enumerated attribute with four possible values: default , rect , circle , and
poly . As this attribute is optional, you may choose not to include it. In this case, the value defaults to—wait
for it— default which, in turn, implies a rectangle that contains the entirety of the associated image. If you
explicitly set the shape attribute to default , you cannot include the coords attribute. For all other values
of the shape attribute, you must include the coords attribute and correctly specify values.
Listing 6-15 shows an image map with a single area.
Listing 6-15. An image map with a single area element
<map name="crime-map" id="crime-map">
Because no shape is specified for the image map's lone area , it becomes a rectangle containing the entire
image. If you want to make this area clickable, you'd add an href attribute as seen in Listing 6-16.