Headings

Headings are used to structure content and improve readability for both users and search engines. They act as visual cues, breaking up large blocks of text and guiding users through the page's information hierarchy. 

There are six different levels of headings from H1 to H6. Heading 1 is the most important heading and should appear only once on a page. Keep a logical hierarchy without skipping levels (e.g. H1 → H2 → H3) to support web accessibility requirements.

• After opening a page, click the blue plus icon where you want the new heading. Select ‘Heading’ from the pop-up window.
• In the heading window:
  • Enter your heading text.
  • Choose an appropriate heading tag (see the accessibility guidelines below).
  • On the 'Styles' tab, set the banner width, text alignment, optional anchor link, and column span.
• Click 'Apply' to add the heading to the page.

• After adding a heading, you can amend it in the edit pane which automatically opens on the right-hand side of the screen.
• Any changes you make are immediately updated in the preview page to the left.

Use the toolbar to: 

Image

• Move the heading up or down the page
• Edit the component settings, e.g. heading tag
• Copy the component
• Delete the component from the page.

Headings make it easier for users to scan your content and find what they need, but they're also essential for users who rely on screen readers and other assistive technologies. 

To ensure your headings meet accessibility requirements:

• Break up your content into logical chunks and use headings liberally.
• Use built-in heading styles (H1 to H6) in correct sequential order. There should only be one H1 on the page (the page title).
• Don’t skip heading levels.
• Don’t use bold text as a substitute for headings.
• Keep headings short but descriptive so users can quickly grasp what each section is about.

Use the built-in Sa11y accessibility checker to check heading levels are correct:

Image

Back to top