How to use HTML headings
- Léonie Watson
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.
<h1>Page title</h1> <p>…</p> <h2>Section heading</h2> <p>…</p> <h3>Sub section heading</h3> <p>…</p>
<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:
… 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!
Let's work together
We believe that creating ground breaking experiences that make measurable differences in the way people live takes a special type of collaboration. Our team designs impactful experiences by leaning on the variety of capabilities and expertise within Nomensa to ensure our solution is bespoke to your needs. We believe collaboration is key, let’s work together.