Linking the Web - HTML5 with CSS3 - page 191

browsers have happily rendered those anchors as singular, clickable regions. This behavior, however, was
invalid according to the HTML specification. The authors of the HTML5 specification, in turn, deemed this
commonplace behavior worthy of codification. Thus, you may now wrap anchors around flow elements or
phrasing elements so long as the context is appropriate.
For more information on HTML5's design principles, check out: www.w3.org/TR/html-
design- principles/
Image Maps
The anchor isn't the only element for creating links in a document. You have another tool at your disposal:
the image map. Image maps define one or more clickable regions within an image that can be linked to
other documents or to other portions of the same document.
Just like real-world maps, image maps are best suited for conveying visual information. An image map is
an appropriate choice for creating, say, a clickable, interactive world map. Using an image map to mark up
a site's primary navigation, however, is not an appropriate use of an image map.
Image maps have quite a storied history. In the early days of web design, image maps were frequently
used to add interactivity to graphically rich designs. At the time, browser support for CSS-based layout was
largely non-existent, often resulting in designs that used very large images with complexly defined image
maps. As time passed, CSS support improved and the use of image maps fell by the wayside. In their
place, we have visually rich layouts that use CSS positioning to achieve similar effects.
Image maps, while still perfectly valid in HTML5, should be used with care. Although image maps are
relatively easy to implement, it's also quite easy to misuse them, leaving your users with a bad interactive
experience or, worse yet, an inaccessible site. As you know, it is of the utmost importance to always keep
accessibility and user experience in mind when considering using image maps—or any other feature of
HTML—in your page.
map
The map element, along with its descendant area elements, defines an image map. Unlike some elements
in HTML5, the map element must have both a start tag and an end tag. Additionally, the map element's
display property defaults to inline , meaning you needn't worry about a map element disrupting the
layout of your page. In fact, map elements are essentially hidden from view; browsers typically set a map
element's height and width to zero.
Depending on the context, a map element may contain either phrasing content or flow content. Much like
the anchor element discussed earlier in this chapter, the map element's content model is transparent.
Basically, if the map element is a child of any element that can contain flow content (such as a div ), it too
can contain flow content. If the map element is a child of any element that can only contain phrasing
content (such as a span ), then the map element can also only contain phrasing content.