Why web content needs headings

We use headings on web pages to structure our content and make it accessible to everyone.

Well-structured and well-written headings make web pages and the information on them easier to find, read, and understand.

Accessibility 

When people read web pages, they often scan the headings to find the information they need. People using screen readers and other assistive technology often use headings in a similar way, moving from one heading to another to find relevant content.

As a public sector body, we're legally required to make the content on our website as accessible as possible. The government checks our content to make sure it complies with the internationally recognised guidelines from the World Wide Web Consortium (W3C).  

Read about the Web Content Accessibility Guidelines (WCAG) on headings. 

Find out more about accessibility or contact beta-content@bath.ac.uk if you have any questions. 

Use the correct heading hierarchy

When you add headings to your content, you must use heading styles in the correct hierarchy.

Visually, heading styles define the size and style of each heading on the page. People who can see the headings understand that larger headings are higher in the hierarchy than smaller headings.

Heading styles also tell screen readers and other assistive technologies how to describe the text to users. You must use the correct headings styles so people with visual impairments can understand the hierarchy and structure of your content.

Heading styles are named and ordered from 1 to 3. The first heading for every section on a page should be Heading 1. If you need to add subsections within this section, use Heading 2, and so on. When you make a new section, go back to Heading 1. 

In other words: 

• Heading 1 describes the whole section 
• Heading 2 is a subsection of Heading 1 
• Heading 3 is a subsection of Heading 2 

Never skip heading styles, for example, don't follow a Heading 1 with a Heading 3. This confuses users and makes our content inaccessible to people using assistive technology. 

Don't choose your heading based on visual appearance. The pages on the University website are designed to display content clearly based on the needs of our users, so it's important that you format your content correctly. 

Heading types in Typecase 

There are two ways to create headings on Typecase pages, depending on the content type you’re using and the components available in that content type.

Required heading fields 

Some Typecase components have required heading fields for you to add headings to each section of your page. These headings fields automatically create a Heading 1.

Don't add Markdown formatting characters to these fields. 

Content types with required heading fields include: 

• Campaign
• Case study
• Guide 

Body copy fields 

In body copy fields (the main text field for a section or page), you need to use Markdown formatting to create headings.

If the component you’re using has a required heading field at the top, add headings to the body copy field starting with a Heading 2. This is because the section you’re working on already has a Heading 1.

If the component doesn’t have a required heading field at the top, you need to start any sections you create with a Heading 1.

Content types without required heading fields include: 

• Corporate information 
• Legal information 
• Announcement 

Use Markdown to create headings

Use Markdown formatting to add headings in body copy fields. 

To create a Heading 1, put a hash symbol (#) in front of the text. Follow the heading text with a hard return. 

Use two hash symbols to create a Heading 2 and three for a Heading 3. 

For example: 

#Heading 1
##Heading 2
###Heading 3 

These display as: 

Heading 1 

Heading 2 

Heading 3 

Don't use bold or italics to create headings 

Don’t use Markdown to format headings using italic or bold text. This is not an accessible way to create headings.

 Screen readers and other assistive technologies don’t 'read’ bold or italic formatting. They also don’t identify different font sizes. If you use any of these to create headings, you make your content inaccessible and make it difficult for people with visual impairments to navigate your content. 

How to write good headings

When you write headings, use plain English to describe what each section is about as concisely as possible. Short, clear headings make the page easier to scan and help people find the information they’re looking for.

Make sure each heading on the page is different and distinct. It’s very difficult for people, especially those using assistive technology, to tell the difference between sections with similar headings.

Be consistent in the tone and style of your headings and think about what works best for the content. For example, if you’re writing a guide that directs people through a process, use verbs to describe the actions you explain in each section.

Write headings in sentence case, not title case. Title case (with capital letters for every word) is more difficult for some people to read.

Things to avoid

Don't write headings as questions because questions can give a sense of uncertainty, rather than projecting confidence in the information we're providing. You can use question words to make a statement without a question mark at the end, for example:

Why web content needs headings

Don’t make headings into links. This is inaccessible to people using assistive technologies. Add links using descriptive link text after the heading.

Don’t use heading formatting to make a sentence or paragraph stand out. This makes your content inaccessible to people using assistive technologies because they will be told the sentence or paragraph is a heading.

Don’t add full stops to headings.