Heading hierarchy: one h1, never skip levels

Two rules screen readers enforce strictly

Rule 1: One `<h1>` per page. It identifies what the page is about. Two h1s confuse screen-reader users who navigate by heading shortcut (the equivalent of "skip to next heading"). Lighthouse will warn.

Rule 2: Don't skip heading levels going down. Going from <h1> to <h3> skips h2 — confusing both screen readers and outline parsers.

<!-- ✓ Good -->
<h1>Blog post title</h1>
  <h2>Introduction</h2>
  <h2>The argument</h2>
    <h3>Sub-point</h3>
    <h3>Counter-argument</h3>
  <h2>Conclusion</h2>

<!-- ✗ Bad — h1 → h3 -->
<h1>Title</h1>
  <h3>Sub-point</h3>

<!-- ✗ Bad — two h1s -->
<h1>Site name</h1>
<main>
  <h1>This page</h1>
</main>

Common pattern: site logo is NOT the h1

In a real site, your logo is in the header but the <h1> belongs to the page-specific content inside <main>. The logo is just a link, not the page topic.

<header>
  <a href="/"><img alt="MyApp" /></a>
</header>
<main>
  <h1>Pricing</h1>
  …
</main>

Going back UP is fine

Skipping back up is OK: h3 → h2 is normal (next section). Only the going DOWN direction matters.