Heading Structure

Heading Structure

The way you organize your headings matters — not just for visual appearance, but for accessibility, SEO, and content clarity.

What Is Heading Hierarchy?

Heading hierarchy means using headings in a logical, nested order. Think of it like an outline or a table of contents:

h1: Page Title
  h2: Section 1
    h3: Subsection 1.1
    h3: Subsection 1.2
  h2: Section 2
    h3: Subsection 2.1
      h4: Detail 2.1.1

Rules for Good Heading Structure

1. Only one <h1> per page — this is the main title of the page
2. Don't skip levels — don't jump from <h2> to <h4>
3. Nest logically — <h3> goes inside <h2>, not the other way around
4. Use headings for structure, not styling — don't use <h3> just because you want smaller text

Good vs Bad Heading Structure

✅ Good	❌ Bad
<h1> → <h2> → <h3>	<h1> → <h3> (skipped h2)
One <h1> per page	Multiple <h1> tags
Headings describe content sections	Headings used just for font size

Example: Well-Structured Page

<h1>Cooking Guide</h1>

<h2>Breakfast Recipes</h2>
<h3>Pancakes</h3>
<p>Fluffy pancakes recipe...</p>
<h3>Omelette</h3>
<p>French omelette recipe...</p>

<h2>Lunch Recipes</h2>
<h3>Caesar Salad</h3>
<p>Classic Caesar salad...</p>

Why It Matters

• Accessibility — screen readers navigate pages by headings; a logical hierarchy helps visually impaired users
• SEO — search engines use headings to understand the topic and structure of your page
• Readability — well-organized headings help readers scan and find content quickly

Key Takeaways

• Use only one <h1> per page
• Follow a logical sequence: h1 → h2 → h3 → h4
• Never skip heading levels
• Use CSS to change heading appearance, not a different heading tag