Text - Introducing HTML5 - page 45

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
introductory matter.
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
navigation:
<nav>
<ul>
<li><a href=...>News<a>
<ul>
<li><a href=...>News</a></li>
<li><a href=...>UK</a></li>
<li><a href=...>World</a></li>
...
</ul>
</li>
...
</ul>
</nav>
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
homepage.

BREAkINg NEwS