Why heading order matters in HTML

Just like a well-organised document needs a clear table of contents, your HTML needs a logical hierarchy of headings.

Heading levels are not about font size. They are all about meaning.

Think of it this way:

• <h1> is the page title.
• <h2> is a major section within that page.
• <h3> is a subsection within that major section, and so on.

While not explicitly a WCAG failure, maintaining proper heading order (h1-h6) improves accessibility. It creates a clear document structure, aids screen reader users and helps search engines understand page content.

Why does order matter?

Screen readers are tools that help people with visual, mobility and cognitive impairments read and navigate web pages. They rely on the heading order to understand the structure and jump directly to sections of interest.

Some people using screen readers rely heavily on shortcuts in the tool to jump from heading to heading.

Search engines use headings to understand the page's topic and how information is organised. This can improve your search engine ranking.

A well-structured page with appropriate headings is also easier for all users to understand and navigate, regardless of disability.

Appropriate heading content

When you consider that headings are meant to communicate content structure like this (Chapter 1, Section 1.1, Subsection 1.1.1), it should become clear that only certain pieces of content are appropriate to be heading elements.

Numbers might be large in a design with a word underneath, like this:

But those numbers wouldn't make any sense as headings. If you saw "80k" on a contents page, you wouldn't understand what that section of content would be about. The numbers have to be read together with their accompanying word to make sense. They are not acting as headings — as titles — for any other content. So you know they shouldn't be headings.

So, in assessing what should be headings, think:

• "Is this a title for some nearby content?"
• If no, then it's not a heading. Maybe it's a paragraph or list item
  If yes, then it's a heading.
  So the next question is, "Does this heading and its content belong to the section above?" (i.e. Is the heading a subtitle?)
• If yes, then it needs to be one level below it's parent heading.
  i.e. If the main section has a h2, this would be a h3.

What if designs lack headings?

Consider whether headings are necessary to understand the content of the page. It might make sense visually because of how content is grouped. But would you understand this if reading the content (or having the page read to you by a screen reader)?

If headings are missing from a design, you may need to raise that with the designer, or you may need to add additional screen reader-only (visually-hidden or sr-only) headings on the page.

For example, take a look at this design for a News website:

There is a big heading visible in the design, but that is for a featured article, and not an appropriate heading for the whole page. In fact, visibly there are no obvious candidates for the page's h1 element... If you consider what we've covered about headings, this page may end up with a heading structure as follows:

• <h1 class="sr-only">News Homepage</h1>
• <h2 class="sr-only">Featured Post</h2>
• <h3>The Bright Future of Web 3.0?</h2>
• <h2>New</h2>

See if you can work out the rest! (Remember some headings may need links inside so people can reach these articles.)

Summary

Only use heading elements where it is appropriate to do so.

In essence, proper heading order:

• Improves accessibility, making web pages easier to navigate.
• Enhances Search Engine Optimisation (SEO) because page content abd structure is easy for bots to digest.
• Makes your website more intuitive to use.

Key takeaway: Always use headings in a logical order (<h1> to <h6>) to create a clear and accessible structure for your web pages.