HTML Headings

Use h1 to h6 to give your page a clear outline for readers and Google.

Lesson 6 of 44Beginner12 min read

Headings are the titles and subtitles of your page. HTML has six levels, from <h1> (the most important) to <h6> (the least important).

Good headings do three jobs at once. They let readers skim a page and find the part they need, they let screen-reader users jump from section to section, and they help search engines understand what each part of the page is about.

In this lesson you'll learn how to choose the right heading level, how to build a clean outline, and the common mistakes that make a page harder to use.

Six heading levels, one outline

Think of headings like the outline of a school essay:

Text
h1  Healthy Breakfast Ideas          ← the page title (one per page)
  h2  Quick options                  ← main sections
    h3  Overnight oats               ← sub-sections
    h3  Smoothie bowls
  h2  Weekend treats
    h3  Pancakes
  • Use one <h1> for the main topic of the page.
  • Use <h2> for main sections, <h3> for sub-sections inside them, and so on.
  • Don't skip levels on the way down. Jumping from <h2> straight to <h4> leaves a gap in the outline.

Most pages only need <h1>, <h2> and <h3>. Levels four to six are there for long documents with deep structure, such as manuals.

Choose headings for meaning, not size

Browsers display <h1> large and <h6> small, but never pick a heading level because of its size. If you want large text that isn't a section title, style it with CSS. If something is a section title, use the correct level and adjust its size with CSS later.

The reverse also matters: don't fake a heading with bold text. <p><b>Ingredients</b></p> looks like a heading, but browsers, screen readers and search engines see an ordinary paragraph.

Writing good heading text

A heading should tell the reader what the section is about before they read it. Compare these two:

  • Vague: "More info"
  • Clear: "Delivery times and costs"

Keep headings short, put the most important words first, and make each one different from the others on the page. Clear headings help visitors decide in a second whether a section is the one they need.

HTML Headings Syntax

Heading tags

<h1>Main title</h1>
<h2>Section</h2>
<h3>Sub-section</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>

HTML Headings Summary

  • HTML has six heading levels, <h1> to <h6>.
  • Use one <h1> per page for the main topic, then <h2> and <h3> for sections.
  • Don't skip levels when going deeper into the outline.
  • Choose a heading for its meaning, and change its size with CSS.
  • Clear, specific headings help readers, screen-reader users and search engines.

HTML Headings Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

All six heading levels

Run this to see the default sizes browsers give each level.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1The biggest and most important. Use it once, for the page title.
  2. Lines 2 to 3The levels you'll use most for sections and sub-sections.
  3. Lines 4 to 6Rarely needed. Long documentation pages sometimes go this deep.
Example 2

A recipe page with a clear outline

Notice how the headings alone tell the whole story of the page.

<h1>Grandma's Banana Bread</h1>
<p>Moist, sweet and ready in an hour.</p>

<h2>Ingredients</h2>
<p>3 ripe bananas, 2 cups flour, 1 egg, a pinch of love.</p>

<h2>Method</h2>
<h3>Mix the wet ingredients</h3>
<p>Mash the bananas and whisk in the egg.</p>
<h3>Bake</h3>
<p>Bake at 180°C for 55 minutes.</p>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1One <h1>: what the whole page is about.
  2. Line 4An <h2> for the first main section.
  3. Line 7A second main section.
  4. Lines 8 to 11Two <h3> steps that belong to the Method section.

Common HTML Headings Mistakes

Using headings to make text bold or big

Don't
<h3>Free delivery on orders over £20!</h3>
Do
<p class="promo">Free delivery on orders over £20!</p>

A promo line isn't a section title. Use a paragraph and style it with CSS. Headings should only label sections.

Several h1 tags and skipped levels

Don't
<h1>My Blog</h1>
<h1>Latest posts</h1>
<h4>How I learned HTML</h4>
Do
<h1>My Blog</h1>
<h2>Latest posts</h2>
<h3>How I learned HTML</h3>

Keep one <h1> and go down one level at a time.

HTML Headings in Real Projects

Headings and SEO

Search engines pay attention to headings to understand the topics on a page. A clear <h1> that matches what people search for, like "Banana Bread Recipe", and descriptive <h2>s like "Ingredients" help your page show up for the right searches. Don't stuff keywords; write headings for people and search engines will follow.

HTML Headings Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Make "Our Menu" the main page title and "Drinks" a section heading.

<>Our Menu</>
<>Drinks</>
<p>Coffee, tea and hot chocolate.</p>
Multiple choiceeasy

How many <h1> elements should a typical page have?

Multiple choicemedium

You want a sub-section under an <h2>. Which tag should you use?

Fix the bugmedium

This page has two <h1> headings and skips from <h2> to <h4>. Fix the outline: keep "Travel Journal" as the only <h1>, make "Japan" an <h2>, and "Tokyo" an <h3>.

<h1>Travel Journal</h1>
<h1>Japan</h1>
<h4>Tokyo</h4>
<p>The trains are always on time.</p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Exactly one <h1>
  • "Japan" is an <h2>
  • "Tokyo" is an <h3>
  • No <h4> left

HTML Headings Quiz

4 questions to check what you learned.

  1. Which heading is the most important?

    • <h3>
    • <h6>
    • <heading>
    • <h1>

  2. There is an <h7> tag in HTML.

    • False
    • True

  3. You want some text to look big, but it isn't a section title. What should you do?

    • Use <h1> because it's big
    • Use a paragraph and make it big with CSS
    • Use <h6> so it's less important
    • Use several <br> tags

  4. Why do screen-reader users care about headings?

    • Screen readers read headings in a louder voice
    • Headings are the only text a screen reader reads
    • They can jump between headings to skim the page
    • They don't, because headings are visual only

HTML Headings Challenge

Outline a "Top 3 Games" page

Build a page with a proper heading outline:

  1. One <h1> titled Top 3 Games of the Year
  2. Three <h2> headings, one for each game
  3. A short paragraph under each <h2>
<!-- Your headings and paragraphs here -->
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • One <h1> reading "Top 3 Games of the Year"
  • Exactly three <h2> headings
  • At least three paragraphs
  • Each <h2> is followed by a paragraph

Related HTML topics

07Paragraphs & BreaksParagraphs, line breaks, dividers and how HTML handles spaces.26Semantic ElementsStructure pages with elements that describe what each part is.38AccessibilityBuild pages everyone can use, including screen-reader and keyboard users.
Esc
↑↓ to navigateEnter to open