Table of Contents
1.1.2. Implement a logical and thorough hierarchy of headings using the tags <h1> to <h6>
To tag the headings on each page, use the heading tags from <h1> to <h6>, if required. The structure of the headings must be both logical and thorough.
This means that:
- There must be no “jumps” or inconsistencies in the heading structure — no sudden change from an
<h1>to an<h3>without an intervening<h2>, for example. - All the elements that are used as headings must be tagged as headings.
To implement a thorough and logical hierarchy of headings, bear in mind that the headings form the “Table of contents” of the page. Ask yourself if the table of contents is logical and thorough.
- It is perfectly acceptable to use several <h1> on a page if there are several headings of the same level.
- A best practice in accessibility is to avoid using hidden headings.
As from HTML5, it is possible to implement a complete hierarchy of headings, on several levels, by using only the <h1> tag together with the new tags meant for creating sections in the document, such as <article> or <section>. It is also possible to leave “breaks” in the structure of the headings.
It is however preferable, for the time being, to continue to structure the headings in a logical and thorough manner, as was done before HTML5. You should continue to use the headings <h1> to <h6> until the development of HTML5 is finished, and it is properly implemented in browsers and assistive technology.
Examples
Below, 3 examples of hierarchical heading organisation for one page. The first two organisations are correct, the last one not.
<h1><a href="/"><img src="atos.png" alt="Atos (go home)" title="Atos (go home)" /></a></h1> […] <h2>Careers at Atos</h2> […] <h3>What to expect when you start Career at Atos</h3> […] <h3>What to expect from your Career at Atos</h3> […] <h2>Curious</h2> […] <h2>Accessible Careers</h2> […] <h2>Graduate Jobs</h2> […]
In this example, hierarchical heading organisation is logical and comprehensive.
<p><a href="/"><img src="atos.png" alt="Atos (go home)" title="Atos (go home)" /></a></p> […] <h1>Careers at Atos</h1> […] <h2>What to expect when you start Career at Atos</h2> […] <h2>What to expect from your Career at Atos</h2> […] <h1>Curious</h1> […] <h1>Accessible Careers</h1> […] <h1>Graduate Jobs</h1> […]
In this example, hierarchical heading organisation is logical and comprehensive too.
Note that other hierarchical heading organisations are possible.
<h1><a href="/"><img src="atos.png" alt="Atos (go home)" title="Atos (go home)" /></a></h1> […] <p class="heading">Careers at Atos</p> […] <h3>What to expect when you start Career at Atos</h3> […] <h3>What to expect from your Career at Atos</h3> […] <h4>Curious</h4> […] <h4>Accessible Careers</h4> […] <h4>Graduate Jobs</h4> […]
In this example, hierarchical heading organisation is incorrect because there are jumps and inconsistencies (a passage from <h1> to <h3> without <h2>, for example). And, the “Careers at Atos“ heading is not tagged as a heading.
Some useful tools
Browser extensions can highlight hierarchical heading organisation used on a page:
- HeadingsMap for Firefox.
Related recommendations
- Previous recommendation: 1.1.1. Identify the main regions of the page with the role attribute
- Next recommendation: 1.1.3. Structure navigation menus with lists
