HTML and CSS Reference
In-Depth Information
<li><a href=”contact.html”>Contact</a></li>
It depends largely on whether you believe that site-wide naviga-
tion belongs in the site-wide header and also pragmatic consid-
erations about ease of styling. Take, for example, my personal
site, which has a very long site-wide navigation on the left of
the content area, which can be much longer than a post. Putting
this <nav> in the <header> would make it very hard to put the
main content in the right place and have a footer, so in this case,
the site-wide navigation is outside the <header> , and is a sibling
child of the <body> , as in this example ( Figure 1.7 ).
FIGURE 1.7 Typical page with
site-wide navigation out of the
main header area.
Note that we're currently only creating the main <header> for
the page; there can be multiple <header> s—we'll come to that in
Chapter 2.
The <nav> element is designed to mark up navigation. Naviga-
tion is defi ned as being links around a page (so, for example,
a table of contents at the top of an article that links to anchor
points on the same page) or within a site. But not every collec-
tion of links is <nav> ; a list of sponsored links isn't <nav> . Neither
is a page of search results, as that is the main content of the
As with <header> s and <footer> s (and all of the new elements),
you're not restricted to one <nav> per page. You might very well
have site-wide <nav> in a header, a <nav> which is a table of con-
tents for the current article, and a <nav> below that which links
to other related articles on your site.
Search WWH ::

Custom Search