Document structure

Recipe 2.6 Present content in order

Code:

<header>
  <a href="/">
    Johanna’s Toy Store
  </a>

  <nav aria-label="Main">
    <ul>
      <li>
        <a href="/home">Home</a>
      </li>
      <li>
        <a href="/products" aria-current="page">Products</a>
      </li>
      <li>
        <a href="/team">Team</a>
      </li>
      <li>
        <a href="/contact">Contact</a>
      </li>
    </ul>
  </nav>

  <form role="search">
    <label for="search">Search</label>
    <input type="text" id="search">
  </form>
</header>

<main id="content">
  <h1>All products</h1>

</main>

<footer>
  &copy; 2024
</footer>