====== 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.

<note astuce>**Tip**

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.
</note>

<note>**Note**

  * 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.
</note>

<note html5>**HTML5**

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.
</note>

===== Examples =====
{{:notices:html-css:hierarchie-titres-01.jpg?direct&400|}}

Below, 3 examples of hierarchical heading organisation for one page. The first two organisations are correct, the last one not.

<note bien>
<code html>
    <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>
    […]
</code>
In this example, hierarchical heading organisation is logical and comprehensive.

</note>

<note bien>
<code html>
    <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>
    […]
</code>
In this example, hierarchical heading organisation is logical and comprehensive too.
</note>

Note that other hierarchical heading organisations are possible.
<note mal>
<code html>
    <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>
    […]
</code>
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.

</note>
===== Some useful tools =====

Browser extensions can highlight hierarchical heading organisation used on a page:
  * [[https://addons.mozilla.org/fr/firefox/addon/headingsmap/|HeadingsMap]] for Firefox.

===== Related recommendations =====

<note bulle>
  * Previous recommendation: [[notices:html-css:identifier-les-principales-zones-de-la-page-avec-l-attribut-role]]
  * Next recommendation: [[notices:html-css:structurer-les-menus-de-navigation-avec-des-listes]]
</note>