Lesson 14 / 25

Headings structure

Use heading levels to create a logical outline, not for styling.

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.