Les balises h1 multiples autorisées en HTML5

0 commentaire

C'est suite à plusieurs conversations m'invitant à ne pas utiliser de multiples balises h1 dans mes intégrations HTML (et plus récemment une demande « insistante » sur le fait de ne pas le faire) que je me vois forcé de marcher sur les pas de Raphaël Goetter -qui avait déjà abordé le sujet- pour expliquer pourquoi : en plus d'être tout à fait valide, cette pratique est bénéfique.

Tout document HTML5 dispose de cloison de contenu (Sectionneur de contenu) que sont article, aside, nav et section. Ces zones de contenu peuvent chacune contenir une balise header et footer (ne cloisonnant pas elles-mêmes le contenu) et de multiple éléments de titrage (Titre en HTML) allant de h1 à h6.

Bien que l'utilisation de plus d'une balise h1 ai pu rationnellement laisser à débattre (même si techniquement les standards ne l'interdise pas), les recommandations et même l'interdiction d'une telle pratique ne sont plus pertinentes et rationnelles à l'heure du HTML5.

La balise h1 et les balises entêtes h2-h6

Que dit la référence HTML

Le W3C, sans parler de HTML5, nous explique ici que : « Les éléments h1 à h6 servent de titre pour les sections auxquelles ils sont rattachés. ». Dans les contraintes additionnelles (là où logiquement nous devrions donc trouver notre interdiction de multiple h1) il est seulement mentionné que :

  • « L'élément h1 ne doit pas être contenu comme élément enfant d'un élément address. »
  • « L'attribut align sur l'élément h1 est obsolète. Utilisez CSS à la place. »

Aucune interdiction n'est donc mentionnée dans cette partie. Ces balises sont autorisés dans les éléments listés ici.

Que dit la référence HTML5

Le W3C nous explique (ici) : « L'élément section représente une zone ou une application générique à un document. Une section, dans ce contexte, est un regroupement de contenu avec une même thématique, et de fait avec des balises d'entêtes. ».

Le W3C nous explique également ici que : « Les éléments h1–h6 et l'élément hgroup sont des éléments d'entêtes. ».

Exemple donné par le W3C

Avant de présenter des exemples tous valide, soulignons que le W3C explique : « Les sections peuvent contenir des balises d'entête de n'importe quel niveau. Mais l'auteur insiste lourdement sur le fait de n'utiliser que des éléments h1, ou d'utiliser les éléments de rang appropriés pour les sections imbriquées à différents niveaux. »

Exemple valide

<body>
    <h1>Foo</h1>
    <h2>Bar</h2>
    <blockquote>
        <h3>Bla</h3>
    </blockquote>
    <p>Baz</p>
    <h2>Quux</h2>
    <section>
        <h3>Thud</h3>
    </section>
    <p>Grunt</p>
</body>

Deux exemples valides, mais avec une différence de clarté

Peu lisible ici

<body>
    <h4>Apples</h4>
    <p>Apples are fruit.</p>
    <section>
        <h2>Taste</h2>
        <p>They taste lovely.</p>
        <h6>Sweet</h6>
        <p>Red apples are sweeter than green ones.</p>
        <h1>Color</h1>
        <p>Apples come in various colors.</p>
    </section>
</body>

```

par contre

Plus lisible

<body>
    <h1>Apples</h1>
    <p>Apples are fruit.</p>
    <section>
        <h2>Taste</h2>
        <p>They taste lovely.</p>
        <section>
            <h3>Sweet</h3>
            <p>Red apples are sweeter than green ones.</p>
        </section>
    </section>
    <section>
        <h2>Color</h2>
        <p>Apples come in various colors.</p>
    </section>
</body>

Le plus facile à maintenir (les sections peuvent bouger)

Maintenable ici

<body>
    <h1>Apples</h1>
    <p>Apples are fruit.</p>
    <section>
        <h1>Taste</h1>
        <p>They taste lovely.</p>
        <section>
            <h1>Sweet</h1>
            <p>Red apples are sweeter than green ones.</p>
        </section>
    </section>
    <section>
        <h1>Color</h1>
        <p>Apples come in various colors.</p>
    </section>
</body>

Explication approfondie sur une architecture HTML orientée composants.

Les multiples h1 et le SEO

Et qu'en dise les moteurs ? Cela est tout à fait pris en compte par les moteurs et heureusement. En se posant deux minutes : on s'aperçoit aisément qu'une architecture sectionné avec plusieurs h1 est plus facilement maintenable qu'une architecture à plat parsemée de h1 à h6. Un exemple en est fait dans Conventions HTML et CSS orientés composants.

Mais je laisse la parole à Matt Cutts, ingénieur chez Google depuis 2000 communiquant énormément via son blog du SEO chez Google :

Le monsieur nous explique que s'il y a une raison logique à avoir plusieurs sections et plusieurs balises h1 dans une page, ce n'est pas mauvais de les mettre en place. Il insiste sur le fait qu'une page intégralement remplis de h1 est problématique en ce qui concerne par exemple un rendu sans CSS (si celle-ci ne se charge pas par exemple) et qu'il est toujours bon d'utiliser les autres balises de niveau. L'important est que les balises h1 restent réservées si possible à la partie entête de chaque section. Mais si elles sont utilisées de manière logique et avec parcimonie il n'y a aucun inconvénient SEO.

Il est autorisé d'avoir plusieurs h1 dans une page HTML5

En conclusion utilisés plusieurs balises h1 dans un document HTML5 est non seulement valide, mais recommandé par le W3C pour respecter une logique de hiérarchie. De plus si deux éléments de premier niveau se valent en importance, il n'y a pas de problème à utiliser deux balises h1, le title étant l'unique élément pouvant représenter un titre unique pour une page donnée.

Lire dans une autre langue