Organising web pages by headings helps users get a sense of the page’s organisation and structure. Visually, headings are presented as larger and more distinct than surrounding text. Making texts larger helps guide the eye around the page. Using headings and making them visually apparent is especially helpful for users with cognitive disabilities and as most of you will be aware, you have an obligation to cater for everyone who may access your site, including people with disabilities.

If the underlying code for a page's headings is correct, people using screen readers, including those with blindness or vision impairment can also benefit from headings. Screen reader users can navigate around a page according to its headings, listen to a list of all headings, and skip to a desired heading to begin reading at that point. Screen reader users can use headings to skip the repeated blocks of content like headers, menus, and sidebars, for example.

In 2017, WebAIM asked how screen reader users preferred to find information on lengthy web pages. Almost 70% of respondents said they preferred to use headings on a page. Clearly, organising pages using headings is one of the best accessibility strategies you can use.

Headings are ranked ‘heading one’ or <h1> through to <h6>. You should always use headings hierarchically. That means the <h1> represents the title, or the most important idea on the page, and subsections are organized with <h2> level headings. Those subsections can themselves be divided with <h3> level headings, and so on. On Social Pinpoint, you will always start with <h2> level headings, as the <h1> - the title of your page - is already set in the page banner.

This is a <h2> heading

The next heading below this would be a <h3> heading.

This is a <h3> heading

This denotes that this section is a sub-section of the above <h2> section. The next heading below will either be a <h4>, if that section is a subsection of this section, another <h3> if it is another distinct sub-section of the above <h2> section, or another <h2> if we are starting a new section altogether.

It’s important not to skip heading levels to be more specific (for example, do not skip from <h2> to <h5>). You can, however, skip headings in the other direction if the page outline calls for it (for example, from <h5> to <h2>).

It’s usually best to plan out your heading structure before composing a page. This will help you both select appropriate heading levels and keep your information better organised overall.

Importantly, do not select heading levels based on their appearance. This is a common mistake. It’s important to remember design is subjective, whereas headings have clear rules, so always select the appropriate heading rank in your hierarchy.

Never use bold instead of a heading. Bolding text when a heading is needed is one of the most common accessibility mistakes. Though the text may look a bit like a heading, the underlying code is not set correctly and screen reader users will not benefit.

Finally, don’t overuse headings. Too many headings isn’t just unnecessary, it’s also unsightly. In most cases, you shouldn’t need to use more than <h2> headings and the occasional <h3>. If you are getting down to <h5> or <h6> you may want to reconsider how long and complex your page is!

In Social Pinpoint you can use the Heading tool if you want to create a freestanding heading you can move around the page, or you can create headings within the Text tool. You can also automatically create <h3> headings by adding ‘titles’ to your tools in the ‘advanced’ tab of most tools’ block settings.