Headings in the right order

The heading tags <h1>–<h6> are not tools for making text bigger. What they really are is the page’s table of contents. When you use them knowing they’re a table of contents, the page’s structure gets across properly to people using screen readers and to search engines.

Some people read by grabbing only the headings

Screen readers have a feature that lists just the headings on a page and jumps to the spot you want to read. This feature does the same thing a sighted person does when they skim the headings and start reading from the section they want.

So when the heading hierarchy is correct, that alone is the same as giving the page a table of contents. Conversely, if you substitute bold decorative text, it drops out of that table of contents entirely.

Search engines read a page’s structure from the heading hierarchy in the same way. Correct headings are two birds with one stone: accessibility and SEO.

Two mistakes people often make

Skipping a level for the sake of looks

“h2 is too big, so let’s make it h4”—do this, and a hole of a nonexistent level opens up in the table of contents. A screen reader user gets lost, wondering “did I miss an h3?” Adjusting size is CSS’s job.

Using bold in place of a heading

A bold <p> looks like a heading, but it won’t show up in the table of contents (as the demo above shows). Conversely, using a heading tag on a sentence you only want to make stand out causes the same problem in reverse. Use a heading tag for a chapter title, and bold for something you just want to emphasize.

”In order only when going down”—going back up is fine

When you hear “in order,” you may worry that an h4 must always follow an h3. That’s not the case. The rule is just this: don’t skip when going down.

• ❌ Jumping straight to h4 after h2—going down while skipping h3 is a no
• ○ h2 after h3—the section ended and you go back up to a new chapter, which is OK
• ○ Another h2 after an h2—lining up the same level is also OK

Think of a book’s table of contents and it feels natural. When Section 3 of Chapter 1 ends, Chapter 2 begins—going “back up” from a section to a chapter is a perfectly ordinary flow. When in doubt, think “what is this heading inside of?” and pick the level one below its parent, and you’ll be right.

One h1 per page

<h1> is the title of the whole page. Just as a book has one cover, a page has just one. Below it, <h2> takes charge of the chapters, and <h3> the finer sections.

<h1>Shima's Page</h1>   <!-- Page title: only one -->
  <h2>Favorites</h2>    <!-- Chapter -->
    <h3>Food</h3>       <!-- Section within a chapter -->
    <h3>Play</h3>
  <h2>Contact</h2>      <!-- Chapter -->

The indentation is just for clarity—it isn’t needed in the actual HTML. If you can picture this tree of contents in your head, you’ve got it.

Summary of this lesson

1. Headings are the page’s table of contents. Use them in hierarchy order: h1 → h2 → h3
2. When you don’t like the size, fix it with CSS (don’t skip levels, don’t substitute bold)
3. <h1> is the page’s title, so only one