How to write accessible web content

Headings in web content

Use meaningful headings to structure and split up information so it's easier to scan.

On this page

Why headings help

Headings describe content and structure and organise a page into sections and sub sections. They help:

  • sighted readers quickly scan content to find what they want
  • screen reader and other assistive technology users skip through sections of content quicker
  • AI tools understand what your text is about

When used correctly, headings help those who can and cannot see a screen find information faster.

Make headings accessible

Headings must be made accessible to everyone who uses them.

For sighted users, headings must visually look different by making text bigger, bold and sometimes a different font to normal text.

For those who cannot see a page, headings need special tags for digital tools to understand and navigate them.  A screen reader, for example, can then list headings like a table of contents and use them to quickly skip through sections on a page.

Creating headings as a web editor

The visual look of headings on a web page is usually pre-set by a website's developer.

Web editors must apply the correct heading tags in content to make them accessible to different digital tools.  

If you are a web editor, learn how to do this at How to make web pages accessible.

Creating headings as a document author

Authors who publish digital documents meant for online reading must add both visual styling and heading tags to headings.

In Microsoft Word, you can do this using the heading levels provided in the 'Styles' panel. 

If you are a document author, learn how to do this at How to make Word document accessible.

Headings in PDFs

A PDF, or Portable Document Format, is not designed to be a flexible online format. They can often cause access barriers for our users.

If you create a PDF document, make sure your headings are accessible.

Most authors do not have access to the special paid software needed to do this after a PDF has been created. The easiest way to do this is to create an accessible source document using heading styles, usually in Word, and then export it to a tagged PDF.

We explain how to do this in How to make Word document accessible

Write, structure and present headings clearly

Writing good headings takes practice and judgement. Here's what we recommend to help.

A heading should:

  • be short (60 characters or less)
  • be clear and descriptive
  • use plain language
  • put important words early (front-load)
  • use ‘active’ words like the ones on this page
  • use sentence case (except for proper nouns): 'This is sentence case' and 'This is Title Case'
  • use words people would use to search for the topic

A heading should not:

  • be unhelpful like ‘Learn more’
  • contain unneeded jargon or technical language
  • use 'introduction’ as your first heading - just give the information
  • end with punctuation like full stops or colons unless required for meaning, like a question
  • be questions (where possible) - people want answers, not questions
  • include abbreviations or acronyms unless well known, for example: UK, EU or NHS.

You do not always need text between headings. For example, users expect to go from heading 1, normally the page title, to heading 2 without any text between. But sometimes, adding text between headings gives helpful context.

Structuring and presenting your headings

Try to avoid more than 3 heading levels (4 max). If you use more, it's a sign your heading structure is too complex.

Be sure to:

  • plan a clear, logical structure for sections and sub-sections
  • use tagged or coded headings, like Microsoft heading styles or a website editing tool's pre-formatted heading levels
  • start at heading 2 in web page content -- h1 is usually the page title
  • start at heading 1 in document content (the main title), then heading 2 and 3 for sections and subsections, like chapters in a book
  • make all headings at the same level look the same (font, size and colour)

Do not use:

  • visual-only styling like all caps, bold, underline or italics to show a heading
  • skipped headings, for example, going from heading level 2 to 4 because you think it looks better 
  • more than one heading level 1 in documents (in most cases)
  • images of text (image banners) as headings instead of real text

Related resources

Guidance on writing headings

Web Content Accessibility Guidelines