HTML and CSS Reference
The following is how I would mark up this page; you might
choose different structures, and that's OK. There's not necessar-
ily “one true way” of doing this; it depends in part on how you
intend to use the content—will you syndicate it, or pull it out of
a database for display in several different page templates with
a variety of heading hierarchies?
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>
I've used two separate <nav> s because the top band (“News,
Sport, Comment.”) is site-wide, whereas the second band
(“News, UK, World.”) is section-wide. An alternative structural
approach would be to have a single <nav> in the header,
with the section-wide navigation as a sublist of the site-wide
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 the Guardian