Introduction
When we design a page of content it should be organised into sections, each with its own heading. These section headings are often styled bigger and bolder by a designer to make them easier to scan.
Nancy’s cataracts get worse every year. They make her vision cloudy, so large blocks of text online are almost impossible for her to read. She relies on bigger, bolder section headings to make sense of what’s on a page.
HTML tags
It’s not enough to simply style the headings in the visual design however. Behind the scenes a developer or content editor will also add an HTML H tag to the heading in the code. These are ordered by size – from <H1> to <H6>. People using assistive technologies such as screen readers are entirely dependent on these tags to access a page’s contents.
A page with well-structured section headings, allows our users to:
- understand the purpose of a page
- make an informed decision about whether they want to read on
- understand how the content is structured
- navigate to the most relevant part
- find out a bit more around the details in each section.
How different users benefit from section headings
- Screen reader users know when they have moved from one section of a page to another.
- People with learning difficulties understand the page content more easily.
- Keyboard users skip from heading to heading, so they can find content of interest more quickly.
- Everyone – Readability evidence and psycholinguistics suggest scanning a page’s contents when first arriving at it, is common for most users regardless of access needs. Section headings provide mental ‘handles’ that aid comprehension.
Writing section headings
Section headings are a bit like chapters in a novel. They should:
- introduce what’s happening in that bit of the page
- be sequential
- prioritised according to user research
- include keywords to improve SEO
- be descriptive enough that a user could make sense of the page without any other content.
Hierarchy of headings
Pages should be structured in a hierarchical manner. The different headings are given a different tag according to rank:
-
<H1>– generally the most important heading. Usually a page title or main content heading. There should only be one of these on a page <H2>– main section headings<H3>–<H6>– sub-sections of a main section heading
Ordering section headings
For section headings to be effective, it’s critical they are properly nested in the right order. Headings with an equal, or higher rank, start a new section. Headings with a lower rank start new subsections that are part of the higher ranked section.
Skipping heading ranks can be confusing and should be avoided where possible. For example, make sure that a <h2> is not followed directly by an <h4>. But, it’s fine to skip a rank, when closing subsections. For instance, a <h2> at the beginning of a section, can follow an <h4> if it is closing the previous section.
Things to check
Have you?
- Used a heading tool to check the HTML tagging structure?
- Checked everything that looks (and acts) like a heading has an HTML tag?
- Made sure there are no HTML tags on content that isn’t intended to be part of the structure?
- Used only one H1 heading on the page?
- Read the headings out loud to see whether they tell the story of the page?
- Researched the hierarchy of the sections of the page, to make sure it reflects users need? Read more in our Research article
- Included keywords in headings, preferably at the front to help SEO?
Thank you for your feedback