Headings

What is a 'heading'?

A ‘heading’ is a type of content that tells users how information is organized and builds structure to your page. Headings are organized in hierarchical order by ‘heading levels’.

collapse all expand all

Example of heading level structure in HTML 

<h1>Heading Level 1</h1> 

<h2>Heading Level 2</h2>

<h3>Heading Level 3</h3> 

<h4>Heading Level 4</h4>

<h3>Heading Level 3</h3> 

<h2>Heading Level 2</h2>

<h3>Heading Level 3</h3> 

<h3>Heading Level 3</h3> 

A page title will be a heading level 1 (h1), with sequential headings being heading level 2 (h2), heading level 3 (h3) , heading level 4 (h4), and so on. 

Why are headings important? 

Headings are important because they build structure to your content. This makes it easier for users to better understand your resources and more easily navigate your page. 

For folks using assistive technology, heading levels make it easier to skim content and find the information they are looking for. 

What are the requirements for headings?

  • Your page must have one h1. This is typically the page title, and might automatically be assigned by your CMS.
  • All heading levels must be in a logical order. Your heading levels must make logical sense and be used in an order that users can understand. Use headings in hierarchical order, and don’t skip levels.
  • All visual headings must also be programmatic headings. If text is a ‘visual headings’, it means that there have been style changes to the text that build page structure. These visual headings must also have a heading tag (h1, h2, h3, etc) added so there is also programmatic structure.
  • All heading levels must have content. Your heading level can’t be empty. It must have text.

Best practices for headings

  • Avoid writing your headings in ALL CAPS. This can be more difficult for users to read.
  • Keep your heading levels unique. This makes it easier for folks to understand and navigate your resources.
  • Avoid adding hyperlinks to your link text. This can be confusing for users to navigate.

How can I test my headings?

Learn more about manual accessibility testing. 

How to test headings.

  1. Run the WAVE tool. WAVE will identify all heading levels on your page. 
  2. Confirm that your headings are present, in order, and provide structure to your page content. 

Most common issues for headings.

  • Heading levels are skipped or used out of order. Make sure your heading levels are in hierarchical order. 
  • Empty heading levels. This means that your heading level doesn't have any content.  
  • Visual headings without a heading tag. This might look like Bolded Information that does not have a heading tag applied. 

Easiest way to fix these issues.

Restructure your heading levels to make sure they are in hierarchical order and delete empty heading levels. 

More resources

Dig into WCAG 

Here is additional information about WCAG 2.1 AA Success Criterion related to headings. 

Using headings in Open Berkeley 

Headings and Accessibility