HTML and CSS Reference
In-Depth Information
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 differ-
ence 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, sidebars are often composed of navi-
gation plus other non-nav stuff. We're using the <aside> element
to group it all together.
<aside>
<nav>
<h2>guardianjobs</h2>
<form role=search ... > ... </form>
<ul>
<li><a href=...>Upload your CV</a></li>
...
</ul>
<h2>Online Dating</h2>
<ul>
...
</ul>
...
</nav>
<section>
<h2>Sponsored Features</h2>
<section>
</aside>
A SIdEBAR oF
NAVIgATIoN
FIguRE 2.15
A sidebar of
navigation
on the right
side of the
Guardian
homepage.
