Headings are not only a visual construct to make your choice of content look different – their ‘order’ has a large impact on the underlying meaning.

You might be familiar with this from applications like Word, where you similarly get the choices of Heading 1, 2 and 3, as well as various title and subtitle formatting options. These look different, but similarly to headings on the web, they have a purpose. 

 1. Hierarchy and sections

As touched on above, headings exist first and foremost with hierarchical purpose that is presented visually.  Headings are greater in size than regular text and scale up or down based on the level of heading used, with those higher-level being larger.

Taking visuals out of the equation, the heading is assigned a number from 1-6 selected by the writer, which creates a structure behind the scenes – this structure can then be communicated to assistive technologies and the web browser, as well as visually.

Avoid ‘Heading 1’

The first point to note is that you should not use Heading 1, despite it being available as the first heading in the WYSIWYG editor.

Heading 1 is typically reserved for the name of the webpage itself, not only for accessibility, but also to aid search engine optimisation. As such, developers tend to set this in code, based on the assigned page name in the composer.  So your Heading 1 is the page title which appears in the banner.

Creating further Heading 1s to those defined in code can cause confusion, with it being unconventional to assistive technologies and browsers, at the same time as disrupting search rankings. As such, your first level of headings in content should always be Heading 2 – and you can then move down levels as necessary, creating sections on the page.

Sections

The easiest way to think of this, is that creating a heading creates a section in your content. When creating a heading of any level, all content beneath that heading is then within that ‘section’, until another heading of greater or the same level is met. If a lower level heading is met, it remains within the section of the higher level heading above, but also creates a sort of sub-section – in which the same principles then apply. 

The illustration below outlines these sections. We can see the red line starting the page with a Heading 1, outlining the entire page. Within that we see a first blue section, which starts with a Heading 2 – then a green section inside that, which starts with a Heading 3. The first blue section then ends, as a new Heading 2 is met (consequently also ending the green Heading 3 section) and another blue section is started. This is represented using the web editor at the bottom of this page.

Hierarchy and sections are slightly altered when taking accordions into account, but this will be covered in the ‘3. Accordions’ section of this guide.

2. Misuse of headings

The easiest trap to fall into with headings is to use them because they are styled differently. If you want larger or simply stand-out text, the easiest visual change to make would be to use a heading.

Don’t! As we have covered, headings construct the hierarchy of a webpage. Creating a heading creates a new ‘section’, and in some cases can close a previous one. This can greatly mislead browsers and assistive technologies, that do not often take the appearance of headings into account.  It means that people using assistive technology can't browse through the sections of the page in a logical format, making it more difficult for them to access the information they are looking at.

Even where visuals are concerned, we are now obscuring the understanding of how headings appear – as they begin to clash with how ‘large text’ appears. Users should be able to easily see where headings are placed to help their understanding of the content - this confusion can to harm the user experience.

3. ‘Intro’ text and paragraphs

As noted, one common misuse of headings is when they are used to make an introductory paragraph stand out.

The best way to ensure that sentences or paragraphs stand-out visually is by using bold text.

Making the text bold illustrates that the text is more important, so is the most acceptable choice as far as accessibility is concerned. 

Manually using other formats for introductory paragraphs also presents issues noted in the ‘Custom formatting’ section later in the guide.  

If you would like a custom format for introductory paragraphs (e.g. different size, colour) then contact Frank Support who can help you.

To recap, using the web editor, here is how the diagram would work:

Page title (Heading 1) - this is on the Banner and not in the content

Section 1 (Heading 2)

Some content

Sub-section 1 (Heading 3)

Some more content

Section 2 (Heading 2)

Some more content