HTML and CSS Reference
In-Depth Information
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. Wouldn't it be
great if browsers provided a single keystroke that jumped straight to the main content?
Ye t i in H T M L 5 t h e r e i is in o
<content>
element to jump to, so how would the browser 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 Scooby. Similarly,
the first piece of content that's not in a
<header>
,
<nav>
,
<aside>
, or
<footer>
is the beginning of the
main content, regardless of whether it's contained in an
<article>
, or
<div>
, or whether it is a direct
descendent of the
<body>
element.
This would be useful for screenreader users, and mobile device manufacturers could have the browser
zoom straight in to the central content, for example.
If you're wishing there were a <content> element as a styling hook, you can use WAI-ARIA and add
role=main
to whatever element wraps your main content, which also provides a styling hook via CSS attribute selectors
(not available in IE6), for example,
div[role=main]
{float:right;}
(see Chapter 2 for more on WAI-ARIA).
In all but one browser, styling these new elements is pretty sim-
ple: You can apply CSS to any arbitrary element, because, as the
spec says, CSS “is a style sheet language that allows authors
and users to attach style . . . to structured documents (e.g.,
HTML documents and XML applications)” and XML applications
can have any elements you want.
Therefore, using CSS we can float
<nav>
, put borders on
<header>
and
<footer>
, and give margins and padding to
<article>
almost as easily as we can with
<div>
s.
Although you can use the new HTML5 elements now, older
browsers don't necessarily understand them. They don't do
anything special with them and they treat them like unknown
elements you make up.
What might surprise you is that, by default, CSS assumes that
elements are
display:inline
, so if you just set heights and
widths to the structural elements as we do
<div>
s, it won't work
