Headings and titles
Following this helps:
- people in a hurry – scannable content is easier to scan and absorb instantly
- people who are stressed – easy to spot, useful headings will help you find things
- people who are multi-tasking – if your attention's divided you'll need clear language
- cognitive impairments – easy to understand headings carry less cognitive load
- visual impairments – labelled headings enable screen reading software to navigate well
- motor impairments – clear and specific headings mean less scrolling up and down
Guidance
1. Use specific, meaningful headings.
3. Structure your page with headings.
4. Use sentence case for headings and subheadings.
1. Use specific, descriptive headings.
Headings need to be meaningful not generic. When people scan your page they'll look at headings first. They decide if they are on the right page or not by your headings. The 'right page' is whether they are going to get their answer or not.
Title of content: the H1 heading
This is what people will see in the search results.
It is the first interaction you will have with your audience and will determine if they are going to give you more than 3 seconds of their time. Use it wisely.
Be clear, concise and to the point. Action-orientated headings work well.
Example:
"Apply for a railcard"
Amusing headings
Headings can reflect a tone and can be engaging.
Play-on-words, idioms and colloquialisms can all be hard to decipher for those with English as a second language or reading challenges.
Example:
We could have called this page "The latest on heading up your headings".
We did not do that.
Think about the value of your content, the channel it's on and the audience you're trying to reach when choosing what type of heading to use.
2. Front-load headings.
Statements work better than questions in headings. They enable you to put the keyword first.
If people are scanning down a page it's faster if you put the word people are looking for at the front of the sentence. If you lead with a question, you can't front-load, you have to start with who, what, when, where, why. This takes time for your audience to read.
Example:
"Should you front-load your headings?"
"Front-load your headings."
You get to the essentials of the information much faster with the second heading.
3. Structure your page with headings.
Using headings gives your page structure and hierarchy.
If you take all the user needs for a journey, work out the channel, format and page, you can structure those needs into headings on the page to indicate importance or process.
Example:
[Title]
Apply for a thing
[Subheadings]
Eligibility
Application
If something goes wrong
Appeal
In the example above, you can see the whole process you need, or may need, to go through.
4. Use sentence case for headings and subheadings.
Sentence case is easier to read.
People want to find out things quickly from your page, including whether they are on the right page. So headings need to be easy to scan and absorb.
Example
"Buying vegan cheese – what to consider" not "Buying Vegan Cheese What To Consider"
Usability evidence around sentence case is in the wiki section on capital letters.
5. Label your headings.
Make sure you apply heading style labels in your CMS or with using code if you're editing the HTML.
These labels are what screen reading software uses to navigate your page. They also ensure heading size is consistent with heading hierarchy, which helps people understand how important a subsection is when they scan.
In our example the title would be labelled H1 and the subheads would be H2s. There might be subsections in a section. For example, Application may have Cost, How to apply. These would be H3s, as they are subsections of a subsection.
Example:
[h1] Apply for a thing
[h2] Eligibility
[h2] Application
[h3] Cost
[h3] How to apply
[h2] If something goes wrong
[h2] Appeal
Usability evidence
'Writing killer web headings and links' Gerry McGovern, 2009
'Headings are pick up lines: 5 tips for writing headings that convert' Neilson Norman Group
'F-shaped pattern for reading web content discovered' First F-shaped pattern study by Jakob Neilson, Neilson Norman Group, 2006
'F-shaped plus different reading patterns', updates to 2006 study by Jakob Neilson, Neilson Norman Group, 2017
‘Topic structure representation and text recall’, Lorch, R. and E. Lorch, 1985
'First 2 Words: A Signal for the Scanning Eye' Jakob Neilson, Neilson Norman Group, 2006
Luke Wroblewski twitter post, 11% of people start scrolling in 4 seconds if the page has loaded. 9 seconds if it hasn't. Luke writes more about scrolling, and concludes with a quote from Josh Porter: "Scrolling is a continuation; clicking is a decision."
'Scrolling and attention' Neilson Norman Group
'How to use headings on your site', Yoast
'Create good titles and snippets in Search Results', Google Webmasters
'Web style guide', particularly chapters 5. Site Structure and 9. Typography, Lynch, P. and S. Horton, 4th edition, 2016
'Typography and language in everyday life: prescriptions and practices', Walker, S., Harlow: Pearson Education, 2001
See also: