Landmarks and their names in HTML

Landmarks are how a screen reader user skips to the part they want.

<header>
  <nav aria-label="Primary">
    <a href="/tours">Tours</a>
    <a href="/profile">Profile</a>
  </nav>
</header>

<main>
  <h1>Rust tour</h1>
  <nav aria-label="Steps in this tour">
    <a href="#step-1">Ownership</a>
  </nav>
</main>

<footer>
  <p>Made for people who type.</p>
</footer>

How it works

The sectioning elements are landmarks already; they need no role.
Two navs on one page need aria-label to tell them apart.
Only one <main>, and everything essential lives inside it.

The run, in numbers

Lines: 17
Characters to type: 275
Tokens: 90
Three-star pace: 70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 77 seconds.

Type this snippet

Step 2 of 4 in Start with the right element, step 2 of 15 in Accessible HTML.

← Previous Next →