🎉
Lesson Complete!
Great heading structure! Now learn about paragraphs and text.
Next Lesson →Course Home
Home›HTML Fundamentals›Lesson 7
✍️ Phase 2 · Text & Structure🟢 BeginnerModule 03

HTML Headings

⏱ 16 min read📖 5 sections🧩 5-question quiz🏆 1 challenge
Course Progress20% complete
HTML has six heading levels — <h1> through <h6>. They are not just big bold text; they define the semantic document outline that search engines crawl, screen readers navigate, and browsers display. A well-structured heading hierarchy is one of the highest-impact things you can do for SEO and accessibility.
Section 1

The Six Heading Levels

HTML headings go from <h1> (most important) to <h6> (least important). Each level is visually smaller by default, but their real power is semantic — they tell browsers and assistive tools about your document's structure.

h1
2.0 em
h2
1.5 em
h3
1.17 em
h4
1.0 em
h5
0.83 em
h6
0.67 em
HTMLAll six heading levels
<h1>Page Title — The Big One</h1>
<h2>Major Section Heading</h2>
<h3>Sub-section Heading</h3>
<h4>Sub-sub-section</h4>
<h5>Rarely used heading</h5>
<h6>Smallest heading</h6>
Section 2

Hierarchy Rules

Headings must follow a logical outline. Two rules are critical:

1️⃣
One h1 per page
Describes the entire page. Using two h1s confuses search engines and screen readers.
🪜
Don't skip levels
Going from h2 directly to h4 breaks the logical outline. Always go level by level.
📑
h2 for sections
Major page sections use h2. Subsections use h3. Deeper nesting is rarely needed.
HTMLCorrect vs Wrong hierarchy
<!-- ✅ CORRECT: logical nesting -->
<h1>JavaScript Guide</h1>
  <h2>Getting Started</h2>
    <h3>Installation</h3>
    <h3>First Program</h3>
  <h2>Variables</h2>

<!-- ❌ WRONG: skipped h2 and h3 -->
<h1>JavaScript Guide</h1>
  <h4>Getting Started</h4>  <!-- h2 missing! -->
    <h6>Installation</h6>   <!-- h3, h4, h5 missing! -->
Section 3

Headings & SEO

Search engines use your heading structure to understand what your page is about. Your <h1> should contain your primary keyword and clearly describe the page. <h2> headings signal sub-topics. This is called keyword hierarchy and has a direct impact on search rankings.

🔍
SEO heading strategy
• h1: primary keyword — should match the page's <title> closely
• h2: secondary keywords and major topics
• h3: supporting detail and long-tail keywords
• Never repeat the same h1 text as the <title> word-for-word — vary it slightly
⚠️
Don't keyword-stuff headings
Headings stuffed with keywords read unnaturally and can be penalised by Google. Write for humans first — clear, descriptive headings that accurately describe the content below them.
Section 4

Headings & Accessibility

Screen reader users frequently navigate a page by jumping between headings — this is how they scan content, just as sighted users scan visually. A broken heading structure makes pages nearly unusable for these users.

HTMLScreen reader navigation
<!-- Screen readers build this outline from headings: -->
<!--
  1. Introduction to Python        (h1)
     1.1 What is Python?           (h2)
     1.2 Why Learn Python?         (h2)
         1.2.1 Job Market          (h3)
         1.2.2 Versatility         (h3)
     1.3 Setting Up                (h2)
-->
<!-- Each heading is a navigation landmark -->
<h1>Introduction to Python</h1>
<h2>What is Python?</h2>
<h2>Why Learn Python?</h2>
  <h3>Job Market</h3>
  <h3>Versatility</h3>
<h2>Setting Up</h2>
Section 5

Best Practices Checklist

Follow these rules to write heading markup that scores well on accessibility audits and SEO crawlers:

  • Use exactly one <h1> per page that clearly describes the page's purpose
  • Never skip heading levels (h1 → h3 without h2 is wrong)
  • Don't use headings just to make text look big — use CSS for visual sizing
  • Don't use <p><strong> as a fake heading — use real heading tags
  • Match your h1 closely to the page <title> for SEO consistency
  • Keep headings concise — they should describe, not explain
  • Use heading hierarchy consistently throughout the page
💡
Styling vs semantics
If you need large bold text that isn't a heading, use a <p> or <span> with CSS font-size and font-weight. Reserve heading tags for semantic structure — they communicate meaning, not just appearance.
🧩 Quick Check — Lesson 7
5 questions · instant feedback
1. How many <h1> elements should a page have?
2. What is wrong with jumping from <h1> directly to <h3>?
3. How do screen reader users commonly navigate a page?
4. When should you use <h2> on a page?
5. To display large bold text that is NOT a heading, what should you use?
🏆
Quiz Complete!
Headings mastered! Moving on to paragraphs and text.
🏆
Lesson 7 Challenge
Code exercise · 10 min
Build a proper heading outline for a blog post page.

Create a page about "Learning Web Development" with a correct heading hierarchy:

1. One <h1>: Learning Web Development in 2024
2. Three <h2>s: "HTML Basics", "CSS Fundamentals", "JavaScript Essentials"
3. Under "HTML Basics", add two <h3>s: "Document Structure" and "Semantic Tags"
4. Add a <p> with some text under each heading
5. Validate the outline is correct — no skipped levels!
Show hints
  • h3 elements must be nested inside an h2 section
  • Use browser DevTools → Accessibility tab to inspect the heading tree
  • Indentation in your HTML helps you visualize the outline
  • Your h1 can appear inside a <header> element
← Attributes
Lesson 7 of 35HTML Fundamentals