Semantic Headings Hierarchy

Why It Matters

Screen reader users often navigate by headings (using the 'H' key) to skim content and find relevant sections under a "Table of Contents" model. A broken hierarchy confuses this navigation pattern.

Best Practices

1. One H1 per page: The <h1> should represent the main topic of the page.
2. Don't skip levels: Do not jump from <h2> to <h4>. Move incrementally (<h2> -> <h3>).
3. Visuals != Semantics: Do not use a heading tag just to make text big. Use CSS classes for styling instead.

Example Structure

<h1>Accessible Web Design</h1>
  <h2>Core Principles</h2>
    <h3>Perceivable</h3>
    <h3>Operable</h3>
  <h2>Implementation</h2>
    <h3>HTML Structure</h3>

Common Mistake

Using <h5> or <h6> for footer text or subtitles. Use a <p> with a class instead.