Heading structure
Advisory
The information on this page is only applicable if you're editing the University webpages using T4. It presumes that you have already completed the beginners and advanced level of the T4 training (a link for staff only - opens in new window).
On this page
Principles of heading structure
Headings are used hierarchically, in that their level (h1, h2, h3 etc) reflects the scope of content they cover.
H1 headings
As discussed in earlier training about the h1 heading, the h1 heading is the title at the top of your content – its scope is the entire page. This is why there must only be one h1 heading on a page.
It may be that your page only has one h1 heading, and no sub-headings, and for fairly short webpages this will be fine.
H2 headings
H2 headings are the next level down from h1. They are used for sub-topics of that main h1 page heading.
So after the lone h1 heading, the next heading should always be h2.
It's fine to have a webpage that simply has one h1 heading and one (or more) h2 headings, if that's appropriate for the content.
After an h2 heading, the next heading could be:
-
- Another h2 heading
or - An h3 heading
- Another h2 heading
H3 headings
H3 headings have a more limited scope than h2 headings, and are used for sub-topics of the preceding h2 heading.
After an h3 heading, the next heading could be:
-
- An h4 heading, for a sub-topic of that h3 heading
or - Another h3 heading, for a new sub-topic about the preceding h2 heading.
or - An h2 heading, for a new sub-topic of the main page title.
- An h4 heading, for a sub-topic of that h3 heading
H4, H5 and H6 headings
H4 headings are used for sub-topics of the preceding h3 heading, and so on, down to level h6.
Headings must not be left empty
This means that a heading should always be followed by content relating to it. This could go straight into text, an image, a video, etc, or it could be a subheading which is then followed by that content.
Worked example of a heading structure, on winter sports
The heading above, 'Example of a heading structure, on winter sports', is an h2 heading.
Winter sports (an h3 heading)
This is some text that would be on the topic of winter sports in general.
Ice-skating (a subtopic of Winter sports, and therefore an h4 heading)
This is some text that would be about ice-skating.
Skiing (another subtopic of Winter sports, and therefore another h4 heading)
This is some text that would be about skiing.
Ice hockey (another subtopic of Winter sports, and therefore another h4 heading)
This is some text that would be about ice hockey.
Summary (another subtopic of the Winter sports section, and therefore another h4 heading)
This is some text that summarises Winter sports.
Avoiding a common structural error
In the above heading structure example on winter sports, a common structural error would be to continue the text after 'Ice hockey' with the summary text, without introducing the new 'Summary' h4 heading. Without that new heading, structurally the summary text should still be about ice hockey.
The summary is in a new paragraph, and visually readers may understand that it refers to all of the content under the h3 heading. Structurally, however, it would place text on one topic (a winter sports summary) under the heading of another topic (ice hockey). This makes the summary information harder to locate for anyone using the heading structure to navigate the page by listening to it using assistive technology.
It will also impeded the ability of search engines to correctly parse the content at that point, and certain circumstances it can even be confusing for readers with sight, especially if the topic is complex.
Here, we've used 'summary' as an example, but the principle applies to any situation where the final paragraph is meant to encapsulate or concludes the overarching heading, rather relating to the sub-heading immediately preceding the text. Final summaries or conclusions need their own headings.
Skipping heading levels
Technically, it's not incorrect - as far as web code is concerned - to, for example:
- follow an h1 heading with an h3, h4, h5 or h6 heading, rather than an h2
- follow an h2 heading with an h4, h5 or h6 heading, rather than an h3
However, this is not advised because it can give the false impression to users of assistive technologies, that information from the 'skipped' level is missing, and they may be concerned that their technology isn't displaying it fully, when this isn't the case.
So, when adding a sub-topic, always use the heading at the next level.
When working the other way, it's absolutely fine to go, for example, from an h6 to an h2, if you're adding new information at that higher level. This simply indicates that a new sub-topic at that level has begun.
Always keep the preceding heading in mind
Structurally, all content should always be about the preceding heading.
This applies:
- no matter how far up the page the preceding heading may be.
- even if the preceding heading is in:
- an accordion
- a tab (in the case of tabs this refers to the contents of the final tab in a row)
- a panel
- a feature box
- a highlighted box
Clearly, this means it's very likely that newly added content will need its own heading.
This remains true, even if you place your new content:
- inside a highlighted box
- underneath a large picture
- underneath a horizontal line
Presentational changes make no difference – the only element that correctly establishes a change of topic or sub-topic, is a new heading.
Keeping this rule in mind will ensure that the relationships between your page headings and content will always be correctly structured.
A special note for Panels
If you're using two or more panel templates together, at less than 100% width, so they display horizontally, the 'last' heading among them will be the last heading reading across left to right.
This is because on a mobile phone, panel templates appear as a vertical 'stack', one above the other, rather than horizontally as they are on a desktop or laptop computer. The panel on the left will be displayed first on a mobile phone.
Emphasising text
This also demonstrates one of the reasons why it's so important not to use heading formatting simply to emphasise text – you will create a 'heading' that all immediately subsequent content should relate towhen you do this. If you need advice on emphasis, see how to correctly emphasise text.