Foundation HTML5 with CSS3

Chapter 6

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:

http://dev.w3.org/html5/html-author/#the-html-and-xhtml-syntax

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

area elements.

Required attributes

There are no required attributes for the area element.

Optional attributes

 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">

<area>

</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.