1.8. Create a logical and thorough hierarchy for headings, using <h1> to <h6> tags

On each page, headings should be tagged from <h1> to <h6>. The structure of the headings should be both logical and thorough.

In other words:

Notes

  • Several <h1> elements can be used on a page if there are primary headings.
  • Good accessibility practice is to avoid using hidden headings.

Tip

To create a logical and understandable heading hierarchy, imagine the headings of the page as a “Table of Contents”. Is it logical? thorough?

Note

The ARIA heading role with the aria-level attribute (with a value of 1 to 6) will override the semantics of any native HTML tag.

For example:

  • <p role="heading" aria-level="1">Heading Level 1</p> is semantically equivalent to <h1>Heading Level 1</h1>.
  • <div role="heading" aria-level="3">Heading Level 3</div> à <h3>Heading Level 3</h3>.

However, this technique is not optimal for accessibility, it should only be used as a last resort.

Examples

Screenshot of Greenpeace homepage.

Three examples of heading structures for this page are provided below. The first two are correct, but the last one is not.

Example 1 (correct)

<h1><a href="/"><img src="GreenPeace.png" alt="GreenPeace (go back to homepage)" /></a></h1>
[…]
<h2>In the spotlight</h2>
[…]
<h3>The Canadian government should not be writing blank cheques for Texas oil-giant</h3>
[…]
<h2>The latest updates</h2>
[…]
<h3>Plastic pollution reaches the Antarctic</h3>
[…]
<h3>Captain Crudeau’s Colossal Mistake</h3>
[…]
<h3>The Canadian government should not be writing blank cheques for Texas oil-giant</h3>
[…]
<h2>Multimedia</h2>
[…]
<h2>Join the movement</h2>
[…]
<h2>Become volunteer</h2>
[…]

In this example of HTML code, the heading structure is logical and thorough.

Example 2 (correct)

<a href="/"><img src="GreenPeace.png" alt="GreenPeace (go back to homepage)" /></a>
[…]
<h1>In the spotlight</h1>
[…]
<h2>The Canadian government should not be writing blank cheques for Texas oil-giant</h2>
[…]
<h1>The latest updates</h1>
[…]
<h2>Plastic pollution reaches the Antarctic</h2>
[…]
<h2>Captain Crudeau’s Colossal Mistake</h2>
[…]
<h2>The Canadian government should not be writing blank cheques for Texas oil-giant</h2>
[…]
<h1>Multimedia</h1>
[…]
<h1>Join the movement</h1>
[…]
<h1>Become volunteer</h1>
[…]

In this example of HTML code, the heading structure is also logical and thorough.

Note that other heading structures are possible.

Example 3 (incorrect)

<a href="/"><img src="GreenPeace.png" alt="GreenPeace (go back to homepage)" /></a>
[…]
<h1>In the spotlight</h1>
[…]
<h2>The Canadian government should not be writing blank cheques for Texas oil-giant</h2>
[…]
<h1>The latest updates</h1>
[…]
<h4>Plastic pollution reaches the Antarctic</h4>
[…]
<h4>Captain Crudeau’s Colossal Mistake</h4>
[…]
<h4>The Canadian government should not be writing blank cheques for Texas oil-giant</h4>
[…]
<h1>Multimedia</h1>
[…]
<p>Join the movement</p>
[…]
<p>Become volunteer</p>
[…]

In this example of HTML code, the heading structure is incorrect because it includes “jumps” and inconsistencies (abrupt transition from <h1> to <h4>).
Also, “Join the movement” and “Become a volunteer” are not tagged as a heading.

Find out more

Comments

Add a comment

Required fields are marked *.

Back to top