Document structure

Code:

<style>
   .skip-link {
    background-color: #fff;
    position: absolute;
    padding: 0.2em;
    display: block;
  }

   .skip-link:not(:focus):not(:active) {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    width: 1px;
  }

   :focus-visible {
    outline: 4px solid #123456;
    outline-offset: 4px;
  }
</style>

<header>
  <a class="skip-link" href="#content">Jump to main content</a>

  <a href="/">
    Johanna's Toy Store
    
  </a>

  <nav id="main-nav" aria-label="Main">
    <ul>
      <li>
        <a href="/home">Home</a>
      </li>
      …
    </ul>
  </nav>
</header>

<main id="content">
  <h1>Johanna's Toy Store</h1>
  
  <h2>Toys</h2>
    <h3>Toys for babies</h3>
    <h3>Toys for kids</h3>
    <h3>Outdoor toys</h3>
  <h2>Books</h2>
  <h2>Special occasions</h2>
  <h2>Contact</h2>
  <h2>Payment</h2>
</main>

<footer>
  <small>&copy; 2023</small>
</footer>