HTML — Headings

Six levels of headings

HTML provides six heading tags, from most to least important:

<h1>Level 1 — page title</h1>
<h2>Level 2 — main sections</h2>
<h3>Level 3 — subsections</h3>
<h4>Level 4</h4>
<h5>Level 5</h5>
<h6>Level 6</h6>

By default the browser renders them progressively smaller and less bold:

<h1>My Travel Blog</h1>
<h2>Trip to Japan</h2>
<h3>Tokyo</h3>
<p>We started in Tokyo...</p>

Renders as:

My Travel Blog

Trip to Japan

Tokyo

We started in Tokyo...

(Each heading smaller than the last, then normal paragraph text.)

Why headings matter twice

Headings do two very different jobs:

1. Visual — human readers scan pages by headings before reading anything. Eye-tracking studies consistently show people read headings first.

2. Structural — machines build your page's outline from them:

• Google uses headings to understand and rank your content
• Screen readers let blind users jump heading-to-heading like a table of contents

A page with proper headings is usable by both groups. A page without them fails both.

The one rule that matters

Use exactly one <h1> per page, and don't skip levels. Think of a book:

<h1> = book title
<h2> = chapter names
<h3> = sections within chapters

You wouldn't start a book at chapter five — so don't jump from <h1> straight to <h4>:

<!-- Good outline -->
<h1>Cooking Pasta</h1>
<h2>Choosing the pasta</h2>
<h3>Long vs short shapes</h3>
<h2>Making the sauce</h2>

<!-- Broken outline -->
<h1>Cooking Pasta</h1>
<h4>Suddenly a tiny detail</h4>   <!-- where did h2/h3 go? -->

Don't pick headings by size

The classic beginner error: using <h4> because "it looks like the right size".

Size is CSS's job. Pick tags purely by meaning — is this the page title? A section? A sub-point? Then style however you like:

h2 {
    font-size: 20px;   /* an h2 can be small if you want */
}

Meaning first, appearance second. That separation is the whole philosophy of HTML + CSS.

Real example: a complete article

<article>
    <h1>Getting Started with Photography</h1>

    <h2>Choosing your first camera</h2>
    <p>Any modern camera will do...</p>

    <h2>Understanding exposure</h2>
    <p>Three settings control light...</p>

    <h3>Aperture</h3>
    <p>The size of the lens opening...</p>

    <h3>Shutter speed</h3>
    <p>How long the sensor is exposed...</p>

    <h2>Practicing daily</h2>
    <p>Take one photo every day...</p>
</article>

Notice the clean hierarchy: one h1, two h2 chapters, h3 details inside them. Screen readers can navigate this; Google can index it.

Mini Practice

Outline something you know well (a hobby, a game, a recipe) using proper heading hierarchy:

• One <h1> for the topic
• At least two <h2> sections
• At least one <h3> detail inside a section

Check yourself: can you read only the headings and still get the story? If yes, your structure works.

Next: paragraphs →