Using HTML headings

When is a heading not a heading? Don’t worry, we’re not getting all existentialist on you. It’s a serious question, and the answer lies behind one of the most common accessibility problems on the web.

In HTML4 there are six levels of heading you can use. The <h1> through to <h6> tags can be used to structure sections of content on the page.

<h1>Page title</h1>

<h2>Section heading</h2>

<p>…</p>

<h3>Sub section heading</h3>

<p>…</p>

<h3>Sub section heading</h3>

<p>…</p>

People using often use headings to navigate through content. For example the Jaws and NVDA screen readers use the h key as a shortcut for jumping from one heading to the next.

As someone using a screen reader moves through the page, the level of each heading is reported. It’s therefore helpful to structure your headings so they form a logical hierarchy.

An h1 would sit at the top of the hierarchy, and all subsequent headings should cascade sequentially down from there. Headings should only drop one level at a time, so an h1 should only be followed by an h2, and not an h3 or h4 for example.

Good example

<h1>Page title</h1>

<p>…</p>

<h2>Section heading</h2>

<p>…</p>

<h3>Sub section heading</h3>

<p>…</p>

Bad example

<h1>Page title</h1>

<p>…</p>

<h3>Section heading</h3>

<p>…</p>

<h6>Sub section heading</h6>

The same isn’t the case when reversing up the hierarchy though. An h4 can be followed by an h2 for example. This sounds unintuitive, but it makes sense structurally.

It might help to think of it like a book with a single title and multiple chapters. Each chapter may contain sections, sub sections and even sub sub sections.

<h1>Book title</h1>

<h2>Chapter 1</h2>

<h3>Section 1.1</h3>

<p>…</p>

<h3>Section 1.2</h3>

<h4>Section 1.2.1</h4>

<p>…</p>

<h4>Section 1.2.2</h4>

<p>…</p>

<h2>Chapter 2</h2>

<h3>Section 2.1</h3>

<h4>Section 2.1.1</h4>

<p>…</p>

The jump from the h4 to the h2 makes sense, because the hierarchy begins cascading down again from that point. Here’s how that book example would appear on the page:

Book title

Chapter 1

Section 1.1

Section 1.2

Section 1.2.1

Section 1.2.2

Chapter 2

Section 2.1

Section 2.1.1

The one thing you don’t want to do is fake your headings. You can of course style the h1 through h6 tags to look the way you want, but you should always use the heading tags and use them properly.

Styling some normal text to look like a heading is the wrong approach. Visually the text might look the part, but a screen reader won’t be able to tell it apart from any other text on the page and neither will a search engine.

So when is a heading not a heading? When it’s just normal text in disguise!

Share this post

About the Author

5 comments

  1. Virginia says:

    Have you done any testing on the heading structure that might exist on a page of HTML5? Multiple article and section elements in various locations on the page may have h1 headings in HTML5 header elements. I’m wondering how screen reader navigation will work in that situation.

  2. Alastair Campbell says:

    Hi Virginia,

    I think Bruce Lawson’s article on HTML4 vs 5 headings is the best explanation of the current status.

    However, this is an area of incompatibility (it’s not something you can progressively enhance), so for the moment I would stick with the HTML4 style headings.

  3. Virginia says:

    Thanks for the link, Alastair. Very helpful. From an accessibility perspective, heading structure in HTML5 is a lingering question that really needs some research in screen readers.

  4. Alastair Campbell says:

    I’m not sure it’s research that’s needed, we know what happens (and it’s not good, yet).

    Steve Faulkner is currently working on things, and could do with help on the HTML5 lists:
    http://lists.w3.org/Archives/Public/public-html/2010Nov/0368.html

  5. Virginia says:

    I’m not in a position to help the W3C in this area, I’m more of an outsider looking in – attempting to interpret what the others are doing. I know John Allsopp recommended sticking to the HTML 4 heading hierarchy we currently use, even in nested sections, for the time being. I guess that’s the best option for now.

Add a comment

Fields marked with an asterisk (*) are mandatory.

Comment details