Headings

A clear description

Your headings should clearly describe the content they introduce. It helps our users know they are in the right place. For your page title and hero heading, these should describe the topic and purpose of your page - eg Applicant hub, How Gemma became Lord Chancellor, Mathematics BSc (Hons).

And the same is true for any subsequent sub-headings and the content in the sections they introduce. We like to use sub-headings because they break up our content, explain it as you go along and make it appear less daunting (so more accessible).

Get them in the right order

In terms of building your page in T4, you need to get your headings in the right order.

There is a hierarchy we need to use so that the page structure makes sense to anyone using assistive technology, such as screen readers.

Step down, jump up

The general rule is that your next heading has to be of the same size as the previous one or the next size down. You can go back up in size in a bigger jump eg from H4 to H2 but don’t jump on the way down.

Every page starts with the H1 heading you get in your hero, either image or pattern. That’s the big heading in full caps at the top of the page. It should not appear anywhere else [oh, the irony].

Heading 1

The next heading on the page has to be H2.

Heading 2

After your H2, your next heading on the page can be H2 or H3.

Heading 3

Once you’ve got to H3, your next heading can be H3 or H4, or you can go back to H2.

Heading 4

Once you’ve got to H4, your next heading can be H4 or H5, or you can go back to H2 or H3.

Heading 5

And so on.

Use the heading formats within the T4 text block to give your headlines their style [Heading 2, Heading 3 etc].

Additional information

Title fields

The heading you put in the title field of a text block will automatically become H2. This is also the case for titles on media embeds and group titles on accordions, key stats, landing page links and logos. They will all appear as H2 headings.

Course pages

On course pages, all your section headings (Course description, What you will study etc) will appear as H2 headings. These are generated by the system, as is the H1 heading.

Use headings only for headings

Don’t use heading formats to emphasise a paragraph of normal text, this can be achieved using the large font format or the feature block. Use heading formats for headings only.

This is a sentence written in the large font format.

This is a sentence written in the feature block format.

Write hero headings in sentence case

Your hero heading should be written in T4 in sentence case ie with an initial capital and then lower case except for initial capitals on proper names. It presents on the page as upper case but will be read by screen readers in sentence case. And it will appear in any list (news, events …) as you have written it.

Watch out for empty headings

Check your page in preview for empty headings, eg <h2> </h2>. It’s easy to check in preview by highlighting all the text to see where there is an empty line. A heading must always contain some machine-readable text.