Write headings h1 to h6 in a logical outline

Open any page you respect — a bank, a news site, a good shop — and the thing holding it together is not the colours. It is the headings. They tell a reader, a search engine and a screen reader what this page is about and how its parts fit together.

HTML gives you six levels, <h1> down to <h6>. <h1> is the highest, <h6> the lowest.

<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>

Type those into your page, save, reload. Each one is smaller and less bold than the last. That is the browser's default styling — and it is the source of nearly every mistake beginners make with headings, because it invites you to pick a heading by how big it looks.

Words in this lesson

Headings are an outline, not a font size

Here is the rule, and it is the whole lesson:

Do not use heading elements to resize text. Use the CSS font-size property for that.

A heading is a structural claim. <h2> does not mean "medium-sized bold text." It means "this begins a section that sits underneath the h1." If you want small bold text that isn't a section heading, that is a job for CSS, which you'll meet in the next course.

Think of it as the contents page of a book. Chapter titles are <h1>-level; the sections inside a chapter are <h2>; subsections are <h3>. Nobody chooses "chapter" because they liked the size of the type.

One <h1> per page

A page should generally have a single <h1> that describes what the whole page is about — much like the <title> element you wrote in the head.

The HTML standard technically permits more than one. Don't. One <h1>, then everything else nested beneath it.

For a tailor's site, the home page's <h1> is the business:

<h1>Ndidi Tailoring</h1>

And the about page has its own single <h1>:

<h1>About Ndidi Tailoring</h1>

Each page gets one. It is not "one per site."

Never skip a level

This is the other hard rule:

Do not skip heading levels: always start from <h1>, followed by <h2> and so on.

Wrong:

<h1>Ndidi Tailoring</h1>
<h3>Our Services</h3>
<h4>Bespoke Suits</h4>

Right:

<h1>Ndidi Tailoring</h1>
<h2>Our Services</h2>
<h3>Bespoke Suits</h3>

The first version says "there is an h2 section here somewhere" and then never provides one. Someone navigating the structure is left wondering where the missing heading went.

Going back up is fine — that is just closing a subsection and starting the next one:

<h1>Ndidi Tailoring</h1>
<h2>Our Services</h2>
<h3>Bespoke Suits</h3>
<h3>Alterations</h3>
<h2>Visit Our Shop</h2>

<h3>Alterations</h3> then <h2>Visit Our Shop</h2> steps back up a level, which is correct. The rule is about skipping downward.

Why this matters more than it looks

A common way for people using screen reading software to navigate is to jump from heading to heading to work out what a page contains. The software can produce an ordered list of every heading on the page — effectively an automatic table of contents.

So your heading structure is the navigation for those visitors. A page with one <h1> and a sensible run of <h2>s is quick to move around. A page where headings were chosen by size is a page they have to read from the top, every time.

Search engines read the same structure to work out what the page is about. Getting this right is free SEO, and you'll build on it in Module 6.

Planning an outline before you type

Write the outline in plain words first. For a small catering business:

Mama Nkechi Catering            (h1)
  What We Cook                  (h2)
    Small Chops                 (h3)
    Full Party Trays            (h3)
  How Ordering Works            (h2)
  Where We Deliver              (h2)
  Prices                        (h2)

Then it converts straight into HTML with no thinking left to do:

<h1>Mama Nkechi Catering</h1>

<h2>What We Cook</h2>
<h3>Small Chops</h3>
<p>Puff-puff, spring rolls, samosa and chicken wings, fried to order.</p>
<h3>Full Party Trays</h3>
<p>Jollof, fried rice, moi moi and protein for 20 to 200 guests.</p>

<h2>How Ordering Works</h2>
<p>Send us a message with your date and headcount.</p>

<h2>Where We Deliver</h2>
<p>Anywhere in Enugu, and to Nsukka with two days' notice.</p>

<h2>Prices</h2>
<p>Trays start at ₦25,000. Small chops from ₦8,000 per hundred pieces.</p>

Read just the headings back. If they alone tell someone what the business does, your outline is right.

Checking your own outline

You already know how, from Module 1: open the page, press Ctrl + Shift + C (Cmd + Option + C on a Mac) and read the Elements tree. Collapse the paragraphs and look only at the headings.

Do the same on a real site. Inspect a news homepage and find its <h1>. On a lot of sites you'll find the structure is worse than the one you just wrote — plenty of professional pages skip levels or use three <h1>s. Being able to see that is the skill.

Common mistakes

The short version

• Headings are structure, not size. Pick the level that's true, and change the look with CSS later.
• One <h1> per page, saying what the whole page is about.
• Never skip a level. <h1> → <h2> → <h3>, one step at a time.
• Screen reader users navigate by jumping between headings — a broken outline is a broken page for them.
• Search engines read the outline too.
• Plan the outline before you type. Write the headings first, fill them in after.

Try it yourself

Give your page a real outline:

1. On paper or in a comment at the top of the file, sketch the outline for a page about yourself — one <h1>, three or four <h2>s, and at least two <h3>s under one of them.
2. Write it into my-first-site/index.html using the correct levels, with a short <p> under each heading.
3. Check it: no skipped levels, exactly one <h1>, and no heading picked for its size.
4. Open DevTools, collapse everything except the headings, and read them top to bottom. Do they alone describe the page?
5. Now inspect two real Nigerian websites and write down their heading structure. Note whether each has exactly one <h1>, and whether any of them skip a level.

Keep this page — the next lesson fills these sections with properly marked-up paragraphs.

You'll know you've got it when you can read just the headings of your page aloud and a stranger understands what's on it.