HTML and CSS Reference
In-Depth Information
<article>
<h2>Tuesday</h2>
<p>Ran out of coffee, so had orange juice for breakfast.
¬
It was from concentrate.</p>
</article>
<footer>
<p><small>This is copyright by Bruce Sharp. Contact me to
¬
negotiate the movie rights.</small></p>
</footer>
Diagrammatically, the HTML5 version is shown in
Figure 1.5
.
FIGURE 1.5
The HTML5 structure
of our blog.
header
article
nav
article
footer
Why oh why is there no <content> element?
It's easy to see how our hypothetical “jump to nav” shortcut key would work, but a more common require-
ment is to jump straight to the main content area. Some accessibility-minded designers add a “skip links”
link at the very top of the page, to allow screen reader users to bypass navigation items. Yet in HTML5
there is no
<content>
element to jump to, so how would a screen reader (or search engine) know where
the main content of a page begins?
Actually, it's simple to determine where it is, using what I call the Scooby Doo algorithm. You always know
that the person behind the ghost mask will be the sinister janitor of the disused theme park, simply because
he's the only person in the episode who isn't Fred, Daphne, Velma, Shaggy, or Scoobs. Similarly, the first
piece of content that's not in a
<header>
,
<nav>
,
<aside>
, or
<footer>
is the beginning of the main con-
tent, regardless of whether it's contained in an
<article>
, a
<div>
, or whether it is a direct descendent of
the
<body>
element. If you want a belt-and-braces approach, you can use WAI-ARIA and add
role=main
to
whatever element wraps your main content (see Chapter 2 for more on WAI-ARIA).
While it might seem counterintuitive that you can mark up the peripheral areas of a page with their own
elements but not the main focus of a page, the content, because it can be easily discovered by excluding
those areas, it's best not to add another element; adding elements to the language isn't “free” for browser
manufacturers as it adds further complexity to test suites and increases risks of regressions.
