HTML and CSS Reference
In-Depth Information
<li>Home</li>
<li><a href=”courses.html”>Cookery Courses</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</nav>
It depends largely on whether you believe that site-wide navi-
gation belongs in the site-wide header, and also on pragmatic
considerations about ease of styling. Take, for example, my per-
sonal site, which has a very long site-wide navigation on the left
of the content area, which can be much longer than a post. Put-
ting 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
).
Note that currently we're creating only the main
<header>
for
the page; there can be multiple
<header>
s—we'll come to that in
Chapter 2.
FIguRE 1.7
Typical page with
site-wide navigation out of the
main header area.
<nav>
The
<nav>
element is designed to mark up navigation. Naviga-
tion is defined as links around a page (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 collection of links
is
<nav>
; a list of sponsored links isn't
<nav>
, and neither is a
page of search results, as that is the main content of the page.
