Skip to main content

Headings

Headings are a useful way to break up a page's content, which can help to make a page more readable and easier to understand.

It's important to use the correct heading structure to maintain accessibility standards, keep the code valid and structure the content in the right way. Using headings in the wrong way can render a page non-accessible.

How heading structure works

HTML, the coding language used to build web pages, gives us six heading levels. It's possible to create a meaningful content structure by using these levels in hierarchical order.

Note

The first heading on a page should always be a heading 1. The code for this looks like <h1>[Heading text]</h1>. 

A sub-heading of a heading 1 should be a heading 2 (<h2>), and so on until heading 6 (<h6>), if required.

On the UHB website, the top-level page heading is usually pre-set as a heading 1. Therefore, the first heading you use when adding or editing body copy should usually be a heading 2. However, on news stories and events, the first heading within the body copy should be a heading 3, as heading levels 1 and 2 are used higher up the content hierarchy for the category and story/event titles.

The levels are explained here as a structured list:

  • Page title [heading 1]
    • Copy section 1 [heading 2]
      • Copy section 1.1. [heading 3]
        • Copy section 1.1.1. [heading 4]
          • Copy section 1.1.1.1. [heading 5]
            • Copy section 1.1.1.1.1. [heading 6]
    • Copy section 2 [heading 2]
      • Copy section 2.1. [heading 3]
      • Copy section 2.2. [heading 3]
        • Copy section 2.2.1. [heading 4]
        • Copy section 2.2.2. [heading 4]
      • Copy section 2.3. [heading 3]

How to format a heading

To turn a line of text into a heading, place the cursor anywhere on the line and click the text formatting drop-down. (This usually has Paragraph selected as the default format.)

Choose the appropriate heading level from the list of options.

Use the text format drop-down to choose a heading level

Note

For guidance on which heading to use, please see the section How heading structure works, above.

Please note that heading 1 is set automatically as the page title for most pages on the UHB website. Unless the Web Team advises otherwise, the first heading level to use in your body copy should usually be heading 2. However, on news stories and events, the first heading within the body copy should be a heading 3, as heading levels 1 and 2 are used higher up the content hierarchy for the category and story/event titles.

Do

  • Use headings to add structure to your content
  • Use the correct heading level

Don't

  • Don't choose a heading based on the size of the text you'd like to use
  • Don't change the appearance of heading text, e.g. text colour, size etc
  • Don't apply additional styles to heading text, e.g. itallics