HTML and CSS Reference
In-Depth Information
It's pretty easy to see the branding and introductory matter that
forms the
<header>
, which also includes two
<nav>
structures for
site-wide navigation (
Figure 2.13
).
FIGURE 2.13
The Guardian
homepage's branding and
introductory matter.
THE GUARDIAN'S
<header>
Immediately below the header is an area with the title “break-
ing news” and a “ticker” of text. Each summary is a link to an
expanded story (
Figure 2.14
).
BREAKING NEWS
FIGURE 2.14
The “breaking
news” area of Guardian
homepage.
Aside from the JavaScript-controlled ticker effect, this “breaking
news” is simply a list of links to other pages. Therefore, it matches
the
<nav>
element. Don't be fooled by the fact that it's horizontal,
with the heading on the same line; CSS will sort that out:
<nav>
<h2>Breaking news</h2>
<ul>
<li><a href=#>Four schoolchildren injured...</a></li>
<li><a href=#>Terrible thing happens to someone</a></li>
...
</ul>
</nav>
Although visually this area appears closely tied with the header, it's
not introductory matter or site-wide navigation. The difference is
subtle, but in my opinion, links to comments, TV, and sports pages
are part of site-wide navigation, while navigating news stories on a
news site is “shortcut navigation” to deeper content. Therefore, this
is a
<nav>
after rather than inside the
<header>
element.
There's more navigation on the right of the main content area
(
Figure 2.15
).
As you saw in Chapter 1, this sidebar can be conceived of as a
group of separate
<nav>
elements, each with its own heading
(Jobs, Dating, CD box sets, Today's paper, and so on), styled
with blue-grey background and thick red border-top.
