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

On each page, headings must be tagged from <h1> to <h6>. The structure of the headings must 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) allows to assign a heading value to any 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> to <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>
[…]
<h1>Plastic pollution reaches the Antarctic</h1>
[…]
<h1>Captain Crudeau’s Colossal Mistake</h1>
[…]
<h1>The Canadian government should not be writing blank cheques for Texas oil-giant</h1>
[…]
<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 inconsistencies (The latest updates titles are at the same level as the “The latest updates” section title).

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