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. Tags can be used to structure sections of content on the page.

Page title

Section heading

…

Sub section heading

…

Sub section heading

…

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

Page title

…

Section heading

…

Sub section heading

…

Bad example

Page title

…

Section heading

…

Sub section heading

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.

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