HTML and CSS Reference
In-Depth Information
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
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.
