Getting heading levels right in HTML

Some people navigate a webpage by reading through a list of headings (or by having them read to them) so it makes sense to keep a sensible tree-like structure. Skipping heading levels can be confusing and should be avoided where possible.

Golden rules

Our number 1 golden rule is that all pages should have a h1 and only one h1. This will tell the user what the page is about.

Structure

The heading structure should be 'tree-like':

Note: This author has been coding for nearly 20 years and has found it rare to see a legitimate h5 or h6 headings on regular web-pages. Terms and conditions, privacy policies and other legal pages may well have heading structures that go 5-6 levels deep but most pages do not pass h3.

Common mistakes and how to avoid them

A lot of developers choose a h5 or a h6 when they see a heading that has been designed to be bold and have a small font-size. Whereas they should be picking the correct heading level and then styling that accordingly.

In vanilla HTML + CSS that may look like this:

<style>
  /* reset headings typographical styling */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 100%;
    font-weight: normal;
    line-height: inherit;
  }

  .font-heading-xs {
    font-family: "YourCustomFont", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.1;
  }
</style>
<h2 class="font-heading-xs">My small heading</h2>

and in React/JSX you may have a component called, something like, Text with an as prop which lets you dictate which HTML element will be rendered.

<Text as="h2" type="font-heading-xs">My small heading</Text>

Further reading

Want to work with us?

Let’s talk about your project