• Web accessibility training
• Foundation-level training for T4 editors
• Headings
• Heading structure

Heading structure

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 an 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 the h1 heading.

So after the lone h1 heading, the next heading should always be h2. You must never select a different heading simply because you'd prefer a different size font.

It's fine to have a webpage that simply has an h1 heading and one (or more) h2 headings, if that's appropriate for the content.

After an h2 heading, the next heading should be:

• • Another h2 heading
    or
  • An h3 heading

H3 headings

H3 headings have a more limited scope than h2 headings; they are used for sub-topics of the preceding h2 heading.

After an h3 heading, the next heading should be:

• • An h4 heading, for a sub-topic of that h3 heading
    or
  • Another h3 heading, for a new sub-topic of the preceding h2 heading.
    or
  • An h2 heading, for a new sub-topic of the page's h1 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.

Return to page contents

---

Maintaining the content hierarchy

A heading must always be followed by content that is directly relevant to that heading. The content could be text (even just a few words), an image, a video, a mix of different media etc, or it could be a subheading which is then followed by content for that subheading.

What must not happen is for a heading to be immediately followed by another heading at its own level or a higher level.

So in summary:

• All:
  • h2s should be about the page's h1
  • h3s should be about their parent h2, and so on.
  and
• the content underneath each heading should be about that heading.

This prevents contents from going off-topic. If the content at any level is starting to 'pull away' from the topic indicated by its heading, then those headings – even the h1 – may need revising, or the content may be better placed elsewhere.

Non-visible h1 headings

If you have a non-visible h1 heading, you'll still need to keep it in mind so that your content doesn't drift from its scope over time. This is especially important if it contains an impermanent element, such as a year (e.g. 'Information for 2025-6'). Not visible doesn't mean 'not there', and that heading will still be read from the source code by assistive technologies, SEO and AI – so remember to update it if you need to.

Return to page contents

---

Worked example of a heading structure, on winter sports

The heading immediately above, 'Worked example of a heading structure, on winter sports', is an h2 heading.

---

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 'Winter sports' 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 impede the ability of search engines and AI 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 conclude the overarching heading. Final summaries or conclusions in these contexts must have their own headings.

Return to page contents

---

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.

Return to page contents

---

Always keep the preceding heading in mind

Structurally, all content 'belongs' to 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
  • a panel
  • a feature box
  • a highlighted box

Presentational changes make no difference, so the principle remains true, even if you place your new content:

• inside a highlighted box
• underneath a large picture
• underneath a horizontal line

Your content should always be about the preceding heading, and assistive technologies, SEO and AI will treat it as such. Clearly, this means that newly added content will often need its own new heading.

Keeping this rule in mind will ensure that the relationships between your page headings and content will always be correctly structured.

Return to page contents

---

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.

Return to page contents