Headings help structure the content of a web page by splitting information out into different sections. They help sighted users scan the page and find information quickly.
But HTML header elements are essential for assistive technologies to be able to navigate a web page. Without them, it’s very difficult for blind and visually impaired users to find the content they need.
Why heading tags are important for website accessibility
Screen readers and assistive technologies rely on tags in the code to identify headings. Heading tags <h1> to <h6> are also known as semantic heading markup.
When heading levels are coded, assistive technologies can use them to navigate the web page. Without proper headings, blind users would have to read the entire web page to get the information they need.
Text that’s large, bold, or styled differently to the paragraph text is not interpreted as a heading unless you use a heading tag. It’s a common bad practice to use bold formatting to indicate a heading or subheading. But only HTML-coded heading levels offer accessibility benefits.
Using <h1>, <h2> and <h3> HTML tags to organise your web content is essential for accessibility and good user experience.
Heading structure should never be used for visual styling alone.
This is a mistake that many content editors and website managers make. Using header styling to make content visually stand out creates a poor user experience for assistive technology users.
Structuring web content using H1s, H2s and H3s
When editing an article in your Content Management System (CMS), you’ll usually see different ‘levels’ of headings in the text editor. You can also manually add header tags using a HTML element.
Headings are normally ranked from ‘Heading 1’ or HTML element <h1> to ‘Heading 6’ or HTML element <h6>. It’s important that your headings are logical and hierarchical. This means that <h2> always follows <h1>.
Using H1 headings
Use the <h1> heading to describe the overall page content. <H1>s should be similar to the page <title> and normally represent the most important information on the page. For some content management systems, the page title acts as the Heading 1.
Ideally, there should only be one <h1> per page. On most websites, they typically look larger or formatted in bold. Normally each subheading level after that decreases in size and weight.
Using H2 headings
You should organise the subsections afterwards with <h2> level headings.
Every time you introduce a new topic, use a <h2> heading. You can then divide the <h2> topic into subsections with <h3> level headings, and so on.
Using H3, H4 and H5 headings
You can use Heading 4s if you need to separate topics beneath your subheading but usually, this means the structure is getting more complex. You might want to review your structure to see if you can make an H3 and H2.
If you need to split this information into smaller sections again, you can use <h5> and <h6> tags.
Benefits of using headings
Most website visitors will thank you for using headings to organise your web page content.
A web page that’s structured into sections with headings is more appealing to read than a large wall of text. Especially for those who are in a rush and scanning the page for specific information.
And if your website requires any user to jump around the page to understand its contents, they will quickly tire and leave.
A logical heading structure that’s tagged correctly also benefits:
- People using assistive technology
- Blind and visually impaired people using a screen reader
- People with cognitive impairments
- Deaf and hearing-impaired users, who are more likely to rely on visual cues and headings.
- Users with dyslexia as headings help break up long passages of text.
Other benefits of having a good heading structure
- Thinking about your page structure before you draft web page content can help keep your ideas focused.
- The more predictable your content structure is, the more likely your users will find the information they are looking for.
- Using headings correctly can complement your website’s search engine optimisation (SEO) strategy. This is because they communicate the most important information contained in your web page.
Best practice tips for headings
- Only use one <h1> for each web page.
- Don’t skip heading levels. For example, using an <h2> followed by an <h4>.
- Never use heading levels based on their appearance.
- Make sure each heading is unique on individual web pages.
- Never use semantic HTML heading markup for visual styling elements that are not headings.
- Headings should describe the content that follows it, like labels or signposts.
- Make headings clear, useful and relevant. Avoid long statements or questions
- Try not to overuse subheadings. Most web pages will only need a few <h2> and <h3> headings. Only long or complex pages will need <h5> and <h6> level headings.
- Use a table of contents to make it easier for users to find the information they are looking for.
You can check website page headings using the WAVE web accessibility evaluation tool and clicking on the structure tab.
More resources on heading structure
Structuring your content with headings (WebAIM)
Headings Web Accessibility Tutorials (W3C Web Accessibility Initiative)