Headings

When and how to use headings.

Use the heading levels (Format) dropdown selector in the 'Body' content area of the CMS to select heading levels from Heading level 2 (H2) to H6.

Headings hierarchy and style

Headings break up your page and give it a navigational structure. Each page title is an H1 (heading level 1), so you can only start at H2 in your content.

Never skip heading levels when moving from a higher level to a lower level, for example do not go from H2 to H4. People using screen reader users may navigate using a list of headings, a missed heading level can make this confusing.

A well-constructed page should rarely need to go beyond a H4.

Never use bold text instead of using subheadings. This is inaccessible because a screen reader will not recognise it as a header.

You do not always need to have text between headings, particularly at the start of your page where users expect to go from the page title (H1), to H2 without any explanatory text. But it’s helpful to have content between an H2 and H3 especially when it’s not clear how the H3(s) follow from H2.

Headings and start buttons

Make sure start buttons are under a related heading. If the start button is nested under a heading, that heading must relate to the start button’s task (for example, ‘Report’).

You do not always need text between the heading and the start button.

Example of start links under a related heading

Subheadings

Make sure your subheadings are front-loaded with search terms and make them active.

When not to use a heading

Do not use headings for:

  • questions - they’re hard to front-load (putting the most important information first) and users want answers, not questions
  • technical terms unless you’ve already explained them
  • 'introduction’ as your first section – users do not want an introduction, just give the most important information