HTML and CSS Reference
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
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 ).
FIGURE 2.14 The “breaking
news” area of Guardian
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:
<li><a href=#>Four schoolchildren injured...</a></li>
<li><a href=#>Terrible thing happens to someone</a></li>
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.