Lesson 15 / 26

Headings structure

Build a logical heading outline with h1 to h6 that helps screen reader users scan and understand a page.

Correct heading hierarchy

Start with <h1> (page title). Skip levels only when appropriate. Screen reader users navigate via headings; a broken hierarchy confuses them. Use CSS to style h2 like h1 if needed.

Example structure

Logical outline makes navigation and understanding easier for all users.

<h1>Product Overview</h1>
<p>Introduction...</p>

<h2>Features</h2>
<h3>Design</h3>
<p>...</p>
<h3>Performance</h3>
<p>...</p>

<h2>Pricing</h2>
<h3>Basic</h3>
<h3>Pro</h3>

Common mistakes

Skipping levels (h1 → h3), using heading tags for styling only, multiple h1s on a page, heading text that doesn't match content.

Page title importance

Unique page title helps screen reader users understand page context immediately.