Nav & Header

Navigation and Header

A navigation bar typically combines <header>, <nav>, and a list of links:

<header>
  <h1>Brand Name</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

Why use a list for navigation?

• Semantically correct — nav items are a list
• Screen readers announce "navigation list with N items"
• Easy to style with CSS (remove bullets, display inline)

The <nav> element explicitly marks navigation landmarks, so users of assistive technology can jump directly to the nav.

Your Task

Create a <header> containing a brand name heading and a <nav> with at least 3 links in a list.