In this post I want to focus on something seemingly unremarkable but important when writing concise web content. Headings.

The benefits of using headings

Headings are used to break up the different parts of your page content to give it a logical structure.

This makes the content easier for the user to understand at a glance. It also makes it easier for search engines to crawl, so there are SEO (search engine optimisation) benefits to using headings correctly.

With good use of headings, a user can immediately understand what each paragraph of content is about and navigate directly to the part that is relevant to their search, should they not wish to read the entire page. Users will typically only read 20-28% of text on the page, so the easier the information is to scan and process, the better the user experience.

Headings can be easily identified by the reader, as they are larger and often bolder than the body text. Headings help users scan the content.

Headings help users with visual impairments. Screen readers can easily identify these headings if they use the correct HTML tag. This allows screen reader users to navigate the text with a natural flow.

How to use headings correctly

Used correctly, headings establish a logical sequence to the content and help users to navigate by telling them what information follows each heading.

Use keywords

Headings should feature descriptive keywords to help the reader quickly identify the information they are looking for. Ideally these should be front-loaded (at the start) of the heading.

Keep it short

Headings should be clear and short. Aim for around a maximum of 6 or 7 words.

Follow a logical order

There are six levels to headings, and these should be used hierarchically throughout a page.

H1 is typically the title of the page and is used to tell the user what the page is about. Only one H1 should be used per page.

It follows that H2 would then be the next level of heading used. H2s are the most commonly used header type and are used to separate body text into distinct sections. In this post What are headings?, How to use headings correctly, Web heading bad practices, and Why headings matter are examples of H2 heading tags.

Sections below H2 headings can themselves be subdivided by using H3 headings, and so on, all the way down to H6.

Don’t skip heading levels

It is important that you do not skip the heading hierarchy when structuring your page. For example, an H3 should not appear on the page before an H2 tag. Headings are strictly utilised in a descending order.

Use a new H2 for every new topic. Every new section doesn’t require H3 tags or beyond, if there isn’t enough information to warrant it.

Format headings correctly

Headings are typically bolder and larger than normal body text in their appearance. However, simply making your text bold is not a suitable method for creating subheadings, as any screen reader won’t identify this is text as heading. Nor will any search engine crawler.

Make sure that any heading text is tagged correctly. Most web publishers use WYSIWYG (what you see is what you get) editors that will do the tagging for you, without you having to concern yourself with the HTML coding.

Sample heading hierarchy

<H1>Travelling to the University of Dundee</H1>
<H2>Car</H2>
<H3>Satnav postcodes</H3>
<H3>Travelling from Edinburgh</H3>
<H3>Travelling from Perth</H3>
<H3>Travelling from Aberdeen</H3>
<H3>Travelling from Glasgow</H3>
<H2>Cycle</H2>
<H3>Cycle facilities</H3>
<H2>Train</H2>
<H2>Bus or coach</H2>
<H3>Bus stops near our Dundee campuses</H3>
<H2>Air</H2>
<H2>Taxis</H2>

Web heading bad practices

In order to create effective and user-friendly content for the web, it is crucial to be aware of common bad practices when it comes to creating headings.

Don’t use questions as headings

We’re on a mission to clamp down on frequently asked questions (FAQs) across the website. Users are looking for answers, rather than questions. By phrasing headings as a question, it makes the structure of the page hard to scan. Users will be more likely to miss the key words they are looking for. Without realising it, users scan copy for recognisable keywords. Using clear, front-loaded headings is not only beneficial for the user, but it has added SEO benefits too.

Avoid jargon and technical terms

Technical terms should also be avoided unless they have already been introduced and explained earlier in the page. Avoid complex words and jargon.

Headings are structural, not stylistic

Headings should not be used purely for aesthetic purposes. Although a heading may appear similarly to boldened and enlarged text, screen readers will treat the two differently, to the detriment of visually impaired users.

Don’t overcomplicate your structure

Although headings are great, when used correctly, they should not be over-used. Too many headings can be just as problematic as a wall of text that is not divided into sections with headings. If you find yourself using headings 5 levels down, then perhaps you need to simplify the page for the user.

Why headings matter

Applying some of these pointers to your writing for the web will go a long way towards holding your readers’ attention and helping them to find the information that are looking for quickly and easily.

Keep in mind that headings are not stylistic choices. Instead remember them as paragraph styles that have structural meaning and technical impact on your content. Whilst copy for websites and other digital channels should generally follow the same grammatical and stylistic rules as printed text, it is worth remembering how digital material is consumed.

When your content is clear, concise, and properly structured, the user can easily pinpoint the information they are looking for. A straightforward user experience is likely to attract more traffic to your page, and search engines will look favourably on this too.

Good use of headings is just one part of our content principles that exist to help create more effective content.

Photo by Kenny Eliason on Unsplash