Headings are an outline in HTML

The heading levels are the table of contents, whatever size they happen to render at.

<h1>Keyboard reviews</h1>

<section>
  <h2>Split keyboards</h2>
  <h3>Ergonomics</h3>
  <p>Two halves, two shoulders.</p>
  <h3>Switching cost</h3>
  <p>Two weeks of bad typing.</p>
</section>

<section>
  <h2>Low-profile keyboards</h2>
  <p>Shorter travel, quieter neighbours.</p>
</section>

How it works

One <h1> per page, and it names the page rather than the site.
Never skip a level on the way down; size is a job for CSS.
A screen reader user navigates by these, so they are the page's spine.

The run, in numbers

Lines: 14
Characters to type: 278
Tokens: 78
Three-star pace: 70 tpm

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

Type this snippet

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

← Previous Next →