Skip to main content

Web standards for headings (H2) and sub headings (H3)

All web standards are mandatory for web pages on the Surrey County Council website, S-net and microsites.

Please scroll down or select one of the links below to jump to a section further down this page:


Use of headings (H2) and sub headings (H3)

  • Format headings (H2) and sub headings (H3) using the headings button in Squiz Matrix (public web pages) or the Formatting menu in Lotus Notes (S-net).
  • Do not use bold to format headings or sub headings.
  • Use H2 headings and H3 sub headings to break up long pages into subject areas.
  • Use relevant headings and only use capitals for the first letter (sentence case).
  • Use headings in order, ie H2 before an H3 and H3 should not be used without H2.
  • Do not use headings or sub-headings to change the appearance of text.
  • Headings and sub-headings must not be used as links.

Guidance

If your page is longer than one screen view or contains several distinct pieces of information, you should use headings and sub-headings to divide it into sections as this will make it much easier to read.

  • Correct use of sub headings - you can use as many headings and sub-headings as necessary but, for technical and accessibility reasons, you must set them up in the correct order. Start by dividing your page into sections with H2 main headings. If your H2 headed sections have sub sections, use H3 for those headings.
  • Do not use H3 sub-headings without an H2 main heading appearing first on the page because this will cause problems with screen readers for the visually impaired. Remember:
    H1 = page title (automatically set by Squiz Matrix)
    H2 = main headings
    H3 = sub headings of H2s
    H4 = only to be used on 'accordion' style web pages (with collapsed sections) after an H3 that is after an H2.
  • Use headings to split long pages into sections - it is good practice to split long pages into sections using headings as people are less likely to read pages with large chunks of text.  Splitting pages into headings and choosing clear titles for those headings, will help people find specific information quickly.
  • Use clear and relevant headings to help visitors find information quickly on your page. Only use capitals for the first letter unless it is a proper noun (eg names of people or places) or it spells out an acronym
  • Use anchor links at the top of the page to link to the sections as this will help visitors navigate quickly to the information they are looking for and it will also provide an index that can be used a quick guide to what the page is about (see the guidance on 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 can be used to divide a page up into sections.

Reason for this web standard

Accessibility, technical and usability - this standard is mandatory for accessibility, technical and usability reasons.

Accessibility and technical - Headings and sub-headings are used to structure a page. This structure is used by screen readers for the visually impaired to navigate down the page. The structure is also used by search engines when they catalogue the page. The HTML code used to create pages on our site is designed to be accessible and standards compliant. Using sub-headings without a main heading causes problems with HTML and therefore with screen readers. This means your page cannot be read by everyone and it reduces our website's accessibility rating.

Usability - Headings and sub-headings help make pages easier to use by breaking a large subject into a number of smaller topics. Headings and sub-headings also allow users to quickly scan down a page to find the section that they want to read.


Links should not be added to H2 Headings and H3 subheadings.

Guidance

  • You should not need to make a heading into a link if you are using the correct page layout for your information. Contact the Web and Digital Services for advice on how to improve the layout of your page.
  • The only exception to the rule are pages created using the accordion page style as section headings automatically become links that expand the section. This is acceptable because the links are clear on the page when the section is collapsed.
  • 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.  It is better to add the website link on a separate line and if you use the web address as the link text, it enables people to 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: www.ageuk.org.uk

Reason for this web standard

Usability and technical - this standard is mandatory for usability and technical reasons.

Usability - User testing has shown that people are more likely to notice a link in the body text than when the same link appears as a heading or subheading.

Technical - Browsers can be set up differently as to how they display links and headings, so they can become difficult to read or identify when they have been formatted as both. Please contact the Web and Digital Services if you were thinking of using headings as links.

Top