Page landmarks in HTML

The skeleton of a page: banner, navigation, main content, footer.

<header>
  <h1>typestar</h1>
</header>
<nav aria-label="Primary">
  <a href="/tours">Tours</a>
  <a href="/leaderboard">Leaderboard</a>
</nav>
<main>
  <h2>Today's set</h2>
  <p>Collections, ten steps.</p>
</main>
<footer>
  <p>Built for people who type for a living.</p>
</footer>

How it works

There is exactly one main per page and it holds the content.
header and footer at page level are the banner and the colophon.
Assistive tech uses these as jump targets.

The run, in numbers

Lines: 14
Characters to type: 269
Tokens: 85
Three-star pace: 70 tpm

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

Type this snippet

Step 1 of 7 in Page landmarks, step 1 of 23 in Semantics & metadata.