Curriculum ▸ HTML Zero → Mastery ▸ Lesson 13: Multiple Headings (<h2>–<h6>) Foundations

Lesson 13 — Multiple Headings <h2>–<h6>

Learning Goals

Understand how <h2>–<h6> extend structure below <h1>.
Learn how to create outlines with multiple heading levels.
Avoid misuse of heading levels for styling only.

Part 1 — Multiple Levels of Headings

After your main <h1>, use <h2> for major sections, <h3> for subsections, and so on down to <h6>.

Headings create a logical outline — both humans and screen readers use this outline to understand your content’s hierarchy.

Part 2 — Example

<h1>Web Development</h1>

<h2>Frontend</h2>
  <h3>HTML</h3>
  <h3>CSS</h3>
  <h3>JavaScript</h3>

<h2>Backend</h2>
  <h3>Node.js</h3>
  <h3>Databases</h3>
    <h4>SQL</h4>
    <h4>NoSQL</h4>

Part 3 — Best Practices

Use one <h1> per page, then multiple <h2> for sections.
Keep headings short and descriptive.
Follow the hierarchy in order, don’t jump randomly.

Part 4 — Common Mistakes

❌ Using headings for bold text instead of structure.
❌ Skipping from <h2> directly to <h5>.
❌ Having multiple <h1> headings but no clear outline.

Quick Quiz

What’s the difference between <h1> and <h2>?
How do <h3> and <h4> fit into the structure?
True/False: You can skip heading levels if it looks better visually.

Sample Answers

<h1> is the page’s main title; <h2> are section titles.
They are subsections under higher levels, creating a tree structure.
False — skipping levels harms structure and accessibility.

Mini Project — Build an Outline

Create a document with:

One <h1> title.
At least two <h2> sections.
Subsections using <h3> and <h4>.

Lesson 13 Dictionary

H
Headings (<h2>–<h6>): Define sections and subsections beneath <h1>.
O
Outline: The hierarchical structure created by heading levels.
S
Semantic Structure: Using HTML elements to give meaning to content for humans and assistive tech.