HTML and CSS Reference
In-Depth Information
•
header
•
footer
•
nav
The new elements in HTML5 simply attempt to reflect what authors are already doing.
Structural elements
Using these structural elements helps you make your markup more semantic, but they
also help define the main landmarks in the document.
Consider how important it is for screen reader users and folks who navigate with the
keyboard to be able to skip to different areas of the page, like the navigation. Previously,
we've tried to provide such functionality via “skip links” and shortcuts (see
http://www
.vdebolt.com/nmmug/flow.html
), but HTML5 establishes formal landmark elements
that can be used instead. In fact, the Web Accessibility Initiative's Accessible Rich
Internet Applications (WAI-ARIA) specification already addresses how to use HTML5
with ARIA landmark roles (see
Chapter 2
) for this very purpose.
That said, this is still a hypothetical. As of this writing, no browsers or assistive tech-
nologies reference the structural elements for any navigational purposes.
When to use structural elements
How do you know when to use these new elements? Again, focus on your content and
consider the semantics of each element. For example, most web pages have an area
considered a “header,” composed of a logo, maybe the company name, and a tagline.
And that certainly sounds like a good case for
header
. You may also have a
section
or
aside
in your document with its own set of headlines and navigation, which may also
be contained in a
header
.
The same holds true for
footer
. While most pages have content appropriate for the
new
footer
element, perhaps regarding the author, copyright, and related information,
section
s,
article
s, and
aside
s can feature the same information—and, in turn, can
also include a
footer
.
Finally, consider
nav
. You may have many groups of links on your site, some of which
are for navigation, while others are external.
nav
is only appropriate for
major
site navigation, not search results links
or a blogroll.
