Get Your Headings Right in HTML

Headings aren't just about making text bigger — they create a document outline that search engines and screen readers rely on.

The Heading Hierarchy

Think of headings like a book's table of contents:

<h1>Book Title</h1>                    <!-- Only ONE per page -->
  <h2>Chapter 1</h2>
    <h3>Section 1.1</h3>
    <h3>Section 1.2</h3>
  <h2>Chapter 2</h2>
    <h3>Section 2.1</h3>
      <h4>Subsection 2.1.1</h4>

Rules to Follow

• One <h1> per page — it's your main title
• Don't skip levels — go h1→h2→h3, never h1→h4
• Don't use headings for size — use CSS for visual sizing
• Every section should have a heading

Why Headings Matter for SEO

Google uses headings to understand your page content. A clear heading hierarchy helps your page rank better. Your <h1> should contain your primary keyword.

Why Headings Matter for Accessibility

Screen readers let users navigate by headings. Blind users often scan a page's headings first — just like sighted users scan visually. Proper heading order makes your site usable for everyone.

Common Mistakes

<!-- ❌ BAD: Using h1 for every heading -->
<h1>Main Title</h1>
<h1>Section One</h1>
<h1>Section Two</h1>

<!-- ✅ GOOD: Proper hierarchy -->
<h1>Main Title</h1>
<h2>Section One</h2>
<h2>Section Two</h2>