In this section:
Use of headings (H2) and sub headings (H3)
- Use the headings button format headings (H2) and sub headings (H3)
- Do not use bold on headings
- Use H2 and H3 to break up long pages into subjects
- Only use capitals for the first letter
- Use headings in order, ie H2 before H3 (H3 can't be used without H2)
- Headings and sub-headings must not be used as links
Guidance
If your page is long or contains a lot of distinct information, use headings and sub-headings to divide it into sections.
- Use as many headings and sub-headings as necessary but in the correct order.
- Divide your page into sections with H2 main headings
- Use H3 headings for sub sections within the H2 sections
- Remember:
H1 = page title automatically set by Squiz Matrix
H2 = main headings
H3 = sub headings of H2s
H4 = not used - Use clear and relevant headings to help users find information quickly on your page.
- Use anchor links at the top of the page to link to the sections for quick navigations. (See page layout for more information about anchor links)
Examples
The Web standards for PDFs and other file types page is a good example of how headings are used to divide a page into sections.
Reason for this web standard
Headings and sub-headings are used to structure a page, which is used by screen readers to navigate down the page.
Headings and sub-headings allow users to scan down a page quickly and find the section they want to read.
Do not make headings into links
Links should not be added to H2 Headings and H3 sub headings.
Guidance
- If you have a list of external web links, for example a list of organisations' websites, and you were to make the name of the organisation both the heading and the link, it will not be clear to everyone reading the page that it is a link.
- Add the website link on a separate line and if you use the web address as the link text, users can make a note of it for future use.
Example
Age UK
Age UK provides information and vital direct services to people in later life throughout the UK.
Website: Age UK website
Reason for this web standard
User testing shows people are more likely to notice a link in the body text than a link as a heading or subheading.
Browsers can display links and headings differently, so they can become difficult to read or identify when they have been formatted as both.