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:
<h2>Breaking news</h2>
<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 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.
<form role=search ... > ... </form>
<li><a href=...>Upload your CV</a></li>
<h2>Online Dating</h2>
<h2>Sponsored Features</h2>
FIguRE 2.15
A sidebar of
on the right
side of the
Search WWH ::

Custom Search