Navigation: The <nav> Element

Navigation links are some of the most important links on a page — they help users move between pages and find what they are looking for. HTML provides a dedicated element to mark them.

What `<nav>` is

<nav> marks a block of major navigation links — links that help users navigate the site or page structure.

<nav>
  <a href="/">Home</a>
  <a href="/about.html">About</a>
  <a href="/contact.html">Contact</a>
</nav>

Wrapping navigation links in <nav> tells browsers and screen readers: “this is a navigation landmark.” Screen reader users can jump directly to navigation or skip past it with a single keystroke.

Where `<nav>` belongs

<nav> most commonly appears inside <header> for the primary site navigation:

<header>
  <h1>Mountain Hiking</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about.html">About</a>
    <a href="/contact.html">Contact</a>
  </nav>
</header>

It can also appear elsewhere — inside <footer> for secondary navigation, or as a standalone landmark for a table of contents:

<footer>
  <nav>
    <a href="/privacy.html">Privacy Policy</a>
    <a href="/terms.html">Terms of Use</a>
  </nav>
</footer>

In practice, navigation links are almost always marked up as an unordered list. You will cover lists in full detail in Module 04 — for now, just follow the pattern:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about.html">About</a></li>
    <li><a href="/contact.html">Contact</a></li>
  </ul>
</nav>

<ul> creates an unordered list; <li> is each list item. Using a list inside <nav> communicates “these links are a group” — which is both semantically accurate and the standard convention.

Not every group of links needs `<nav>`

<nav> is for major navigation blocks, not every set of links on a page.

<!-- Appropriate — primary site navigation -->
<nav>
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
</nav>

<!-- Not necessary — these are inline content links -->
<p>
  Learn more in our <a href="/gear">gear guide</a>
  or check <a href="/trails">trail listings</a>.
</p>

Inline contextual links inside a paragraph do not need <nav>. Reserve it for purposeful navigation structures.

How `<nav>` improves accessibility

Screen readers announce navigation landmarks to users. When a page has a <nav>, a screen reader user can:

Jump directly to the navigation without reading through <header> content
Skip past navigation to reach <main> immediately

Without <nav>, all links look identical to assistive technology. Structure makes navigation meaningful.

Exercise

Open index.html in VS Code.

Add a <nav> element inside your <header>, below the <h1>, linking to the files you have created during this course:

<header>
  <h1>Your page title</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
  </nav>
</header>

If you created about.html during the links lesson, link to it. If not, create a minimal one now (just an <h1> in the <body> is fine).

Save and reload in your browser. The links will appear inline by default — styling is a CSS concern. The structure is what matters here.

Recap

<nav> marks major navigation blocks — links that help users navigate the site or page.
It most commonly lives inside <header> but can also appear in <footer> or elsewhere.
Navigation links are conventionally wrapped in a <ul> list (covered in Module 04).
Not every link group needs <nav> — use it for purposeful navigation structures, not inline contextual links.
<nav> creates a navigation landmark that screen readers can jump to or skip over.

Navigation: The <nav> Element

What <nav> is

Where <nav> belongs

Navigation with lists

Not every group of links needs <nav>

How <nav> improves accessibility