Headings
Headings are essential to good page structure and help the audience scan the content to find what they need.
Effective headings
Do
- Use headings in a clear and consistent manner to make it easier for the audience to scan and understand the content of your page.
- Do follow the heading hierarchy when structuring your page.
- Aim for headings that are short and to the point. Headings should be limited to 50 characters. Longer headings can be confusing and difficult to understand.
- Use keywords at the start of the heading. Choose keywords that accurately reflect the content and will help readers understand what the section is about.
- Screen readers and other assistive technologies use headings to provide an outline of a page's content, allowing users with disabilities to navigate the page more easily.
- Headings can also impact a page's SEO by providing context to search engines about the content and structure of the page, which can help with ranking.
- Make sure your headings accurately describe the content that follows. Only include content that directly relates back to the heading.
- Use numbered headings only for a series of actions or steps that the audience need to follow. Check if the sequence component may better suit this type of content.
Don't
- Don't use generic terms as headings, for example 'More' or 'Related information'. Generic terms don't tell the audience about the content that follows the heading.
- Try to avoid long headings as this may suggest there are too many ideas or actions in a section. You may need to:
- Rewrite the section.
- Rewrite the heading.
- Split up the content into different sections and apply relevant headings.
- Don't use all capitals in a heading. Headings should be written in sentence case.
- Don't underline headings.
- Don't use a full stop at the end of a heading.
- Don't use technical terms or industry-specific language that may be unfamiliar to the audience.
- Don't use too many headings in your content, as this can make it difficult to understand and follow.
- Don't use similar headings or repeat the same information in multiple headings.
Use the heading hierarchy
Heading hierarchy is very important in web design and content creation as it helps to structure the content in a clear and organised manner.
Following the hierarchy makes it easier for both the audience and search engines to understand the content's purpose and relationship between different sections.
A proper heading hierarchy also enhances the accessibility of the content for those who rely on assistive technologies like screen readers.
The heading hierarchy refers to the structure of headings used on a web page to indicate the relative importance of sections or content. The most common heading hierarchy used in web page structure is:
Heading 1 (H1) - the page title
Heading 2 (H2)
The in-page nav is driven by H2 headings. Many components have the option to exclude the H2 from the page nav. If you create the H2 in a WYSIWYG, to exclude the H2 from in-page nav, highlight the heading and go Styles and apply the Exclude from In-page Nav option.
Heading 3 (H3)
Heading 4 (H4)
Heading 5 (H5)
In the nsw.gov.au CMS, the H1 is used for the page title and is applied by default when you create a page. The H2 is used for subheadings, H3 for sub-subheadings, and so on.
Do
- Structure your content using the heading hierarchy.
- There should only be 1 H1 per page. This is the page title.
- Use heading levels consistently and in the correct order throughout your content.
- Ensure headings and subheadings relate to the heading above it. Group information in a logical way.
Don't
- Don't skip heading levels in the hierarchy, as this can confuse users and negatively impact accessibility.
- For example, make sure a H2 is not followed directly by a H4.
- When closing and opening sections on a page it is acceptable to skip a heading. A H2 beginning a new section, can follow a H4 if it closes the previous section.
- Try to avoid using H5. A deep heading hierarchy on a page may mean you are trying to do too much on the page. Consider if it is better to:
- reduce the page content
- split the content across multiple pages.
How to add the Headings component
Many of the components allow you to add headings within the component itself. For example the Content block/WYSIWYG, accordion component and some of the links variants.
You may need to add a stand alone heading to your page when a component does not include the heading option.
- From drop down Add Heading
- Add the Heading text. Following the guidance on effective headings.
- Select the heading Type. This is the size of the heading.
- H2
- The option – Excluded from in-page navigation – displays when you select the H2
- H3
- H4
- H5
- H2
- Save your page to display the heading.