The <nav> element marks a page area that contains navigation content: links that help visitors move to other pages or sections, or controls such as a search box. Think of it as the page’s signpost zone—useful to people and to software trying to understand what each part of the page is for. section 11.5 section 11.3
Place navigation wherever it makes sense, though it commonly comes right after the page header. Using <nav> gives the links a meaningful label instead of leaving them as an anonymous pile of tags. section 11.5 section 11.3
PLAY: Mark up a simple site menu
Wrap a group of navigation links in <nav>: <header> <img src="/images/SD-logo.png" alt="Semantics Depot logo"> <h1>Semantics Depot</h1> </header> <nav> <a href="#">Home</a> <a href="#">Blog</a> <a href="#">Contact</a> <a href="#">About Us</a> </nav> The header introduces the site; the nav immediately follows with places to go. A little CSS can then give the whole navigation area its own background, padding, and text style. section 11.5
For a larger menu, put the links in an unordered list inside <nav>. This keeps the menu organized while CSS Flexbox can line the items up across the page. One item can be styled differently to show the current page, so visitors do not have to play detective. section 15.6
A gallery navigation list
<nav> <ul> <li><span class="current-page">Gallery 1</span></li> <li><a href="gallery2.html">Gallery 2</a></li> <li><a href="gallery3.html">Gallery 3</a></li> <li><a href="gallery4.html">Gallery 4</a></li> </ul> </nav> Here, the current gallery is text in a span, while the other entries are links to other gallery pages. section 15.6
<header>
<img src="/images/SD-logo.png" alt="Semantics Depot logo">
<h1>Semantics Depot</h1>
</header>
<nav> #1
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
<a href="#">About Us</a>
</nav> #1
Inspect a compact header-and-navigation example with four links wrapped by the <nav> start and end tags. section 11.5
REMEMBER: <nav> is one member of the HTML5 semantic layout crew, alongside <header>, <main>, <article>, <section>, <aside>, and <footer>. Each tag names the job of a page area, making the overall layout easier for assistive technologies and other automated processes to interpret. section 11.11 section 11.3
