HTML & CSS

Quelques notes sur la balise h1 avec HTML5

La réponse courte à la question « Combien de balises `h1` dans une page Web HTML5 ? » est : « Autant que nécessaire ! » En gros, chaque fois que vous avez une nouvelle section, vous  pouvez mettre un `h1`. D’une manière générale, `h1` accompagnera `article`, `aside`, `nav` ou `section` avec brio ! (cf. Sectioning content). Allons voir ce que nous disent les spécifications HTM5 sur l’emploi des balises de titre `h1` — `h6`, notamment les exemples concernant les niveaux de titre. Ils sont assez parlant bien que parfois déroutant lorsqu’on a l’habitude du balisage utilisé jusqu’à présent. Les éléments `h1` — `h6` représentent les niveaux d’en-têtes de leurs sections respectives. Quant à l’élément `hgroup`, il regroupe un ensemble d’en-têtes composé d’au moins deux niveaux de titre, comme un titre et son sous-titre ou un titre et le slogan associé (un bon candidat pour Logo et Motto, faute de mieux).

Quelques exemples avec H1

Les deux bouts de code qui suivent sont équivalent :

<body>
    <h1>Let's call it a draw(ing surface)</h1>
    <h2>Diving in</h2>
    <h2>Simple shapes</h2>
    <h2>Canvas coordinates</h2>
    <h3>Canvas coordinates diagram</h3>
    <h2>Paths</h2>
</body>
<body>
    <h1>Let's call it a draw(ing surface)</h1>
    <section>
        <h1>Diving in</h1>
    </section>
    <section>
        <h1>Simple shapes</h1>
    </section>
    <section>
        <h1>Canvas coordinates</h1>
        <section>
            <h1>Canvas coordinates diagram</h1>
        </section>
    </section>
    <section>
        <h1>Paths</h1>
    </section>
</body>

La première forme est celle que l’on utilisera le plus souvent dans le cadre d’un CMS, puisque il est rare que l’on puisse saisir des balises `section` lors de la rédaction d’un article, même en passant par l’éditeur HTML puisqu’il supprime les balises exotiques. A moins qu’un plugin ne permette d’y remédier.

Dans un autre exemple, on trouve une utilisation des niveaux `h1` suivis de `h2` et `h3` à l’intérieur des sections :

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

Toutefois, le W3C recommande d’utiliser la forme suivante plus explicite et plus simple à maintenir si l’on doit modifier l’ordre des sections en cours de rédaction (ou lors de corrections plus tardives) :

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

Si la première version semble mieux hiérarchisée, la deuxième est plus claire : un `h1` gratuit pour chaque création de section explicite ! Et l’on peut continuer avec les balises `h2`, `h3`, etc. C’est la profondeur du document, l’imbrication des sections et des sous-sections qui définit la hiérarchie du document. Ce qui ne signifie pas que les balises `h2`  — `h6` sont inutiles. Elle sont toujours indispensables pour structurer le message à l’intérieur des sections.

Pour l’application des styles CSS, en revanche, pas sûr que `section section h1 {…}` soit plus simple que `h3 {…}`. Voir à ce sujet HTML5 Titles Inception, la courageuse descente de Nicolas Hoizey dans les limbes pour styler les `h1` selon leur profondeur.

Sémantique ou optimisation SEO ?

La question du nombre de fois où l’on peut utiliser la balise `h1` dans un document présente deux facettes :

  1. Logique interne du document (Semantic). Un document est souvent identifié par un titre et les parties qui le composent par des sous-titres. Si un document peut ne posséder qu’un seul titre (à l’image des livres où le titre se trouve en couverture), il est possible d’utiliser un titre `h1` par `section`. On suppose alors que les sections forment des parties dissociables du tout. A cet égard, on peut se demander si une balise `article` n’est pas préférable dans la mesure où une partie indépendante peut bénéficier (en théorie) d’un flux RSS dédié.
  2. Le référencement au niveau de la page (In Page). Google accorde un poids supplémentaire (un petit poids, faut pas trop rêver non plus) aux mots-clés contenus dans les balises de titre `h1`, `h2` et `h3`. La tentation est grande de vouloir en utiliser un maximum dans une même page.

Est-il est possible de mixer ces deux approches en tentant le Jackpot de la beauté sémantique et du charme SEO ? Lorsqu’on regarde de près les ouvrages imprimés (livre ou magazine), on s’aperçoit que le titre ne se retrouve pas toujours uniquement sur la 1ère de couverture. Dans certains livres, le titre est parfois répété dans les feuillets intérieurs précédé et/ou suivi de quelques pages blanches. Dans certains magazines, le nom de la revue peut se retrouver sur toutes les pages avec le titre de la rubrique en regard.

Du coup, l’argument du titre unique pour l’ensemble du site Web — en comparaison logique avec le Livre (objet de référence dès qu’il s’agit de bon goût) — ne tient plus. CQFD. Reste la question du `title` présent dans les balises `meta`. D’un point de vue SEO, cette balise est fondamentale car elle fait office de titre dans les SERP’s (Résultats dans les pages de recherche). Il faut donc lui accorder un soin tout particulier. Elle doit être unique sur la page. Or, la plupart des CMS utilisent le titre de l’article pour garnir ce `title`, ce qui le fait apparaitre deux fois. Sans compter l’URL du billet qui reprend souvent ce même titre lors de la réécriture des URL (URL Rewriting).

Il est important de s’assurer que ce `title` n’est pas redondant. Le meilleur moyen d’y parvenir est de considérer qu’il représente le vrai titre de la page Web, indépendamment des niveaux de titres `h1` présents (sans compter que la page n’est pas forcément synonyme de document) ou même du logo, qu’il s’agisse d’un texte ou d’une image. Le Web n’est pas totalement réductible aux pratiques de l’imprimé, fussent-elles de bon goût.

En matière de SEO, redondance rime avec décadence, du moins lorsque la répétition s’effectue sur des niveaux hiérarchiques d’égale importance.

Document vs Site Web

La plupart des exemples fournis par le W3C concernent des documents et pas des sites Web, et ce n’est pas un détail : de nombreuses ambiguïtés concernant le bon usage de la balise `h1` viennent de là. Si l’on doit présenter le compte-rendu d’une réunion, le titre du document pourrait être l’objet du mail qui a servi pour inviter les participants.

Prenons par exemple le document suivant :

<h1>«La Tête Dans l'Asso» accueille les nouveaux adhérents</h1>
<p>Cette année, l'association a recueillie une centaine de nouveaux membres [...]</p>
<h2>La réunion d'intégration</h2>
<p>blablabla [...]</p>
<h2>Le livret d'intégration</h2>
<p>blablabla [...]</p>
<h2>Partenaires</h2>
<ul>
    <li>La Tête dans l'Ecu</li>
    <li>La Tête allant vers... </li>
</ul>

Une fois que le document est balisé correctement, il reste à l’intégrer dans le site Web qui contient généralement des balises d’en-tête de différents niveaux avant et après la zone des articles. Pour simplifier, on peut utiliser le marquage suivant :

<header>
    <hgroup>
        <h1>Mon logo qu'il est beau</h1>
        <h2>Mon Slogan qu'il est grand</h2>
    </hgroup>
    <p>Ma description étendue qu'elle est bien fichue [...]</p>
</header>

Sous réserve que le logo en question soit composé en HTML et signifie quelque chose. Pendant longtemps, ce blogzine avait pour titre «CSS & Webdesign», ce qui en faisait un titre efficace dans le sens où 1) l’expression était représentative du contenu et 2) signifiait quelque chose pour les moteurs de recherche. D’ailleurs, sans trop vouloir enfoncer le clou du SEO, si votre logo-titre n’est pas utile pour les moteurs de recherche (ex. css4design, logo en image), autant utiliser une balise `div`.

Pour intégrer notre document dans le site Web, nous allons l’envelopper avec une balise `article`. Puis, nous allons modifier le marquage du `header` pour supprimer la balise `h1` bien que les spécifications HTML5 ne nous y oblige pas. L’idée est de garder la ou les balises `h1` uniquement à l’intérieur de la balise `article` pour optimiser le SEO In Page. Nous en profiterons pour remplacer la description du site par un résumé de l’article qui servira de chapô :

<header>
    <p>
        <span id="logo">Mon logo qu'il est beau </span>
        <span id="slogan">Mon Slogan qu'il est grand</span>
    <p>
    <p>Un résumé de l'article qui servira de chapô [...]</p>
</header>
<article>
    <h1>«La Tête Dans l'Asso» accueille les nouveaux adhérents</h1>
    <p>Cette année, l'association a recueillie une centaine de nouveaux membres [...]</p>
    <h2>La réunion d'intégration</h2>
    <p>blablabla [...]</p>
    <h2>Le livret d'intégration</h2>
    <p>blablabla [...]</p>
    <h2>Partenaires</h2>
    <ul>
        <li>La Tête dans l'Ecu</li>
        <li>La Tête allant vers... </li>
    </ul>
<article>

Pour continuer dans cette logique de donner la primeur au contenu principal de la page, le mieux est encore de le placer en premier dans le code. En effet, un des avantages du Web par rapport à l’imprimé, c’est que l’ordre d’affichage des éléments n’est pas forcément celui du code source. Ainsi, dans l’exemple, ci-dessus, on peut très bien placer le contenu de la balise `article` avant celui de `header` dans le code et inverser l’ordre d’affichage avec la propriété `float` ou `position: absolute`.

Adaptez la feuille de style aux documents, pas l’inverse !

Si les spécification du W3C autorisent — voire encouragent — l’utilisation de plusieurs balises `h1` pour structurer le contenu à l’aide de `section`, il me semble important d’adapter le balisage HTML à la sémantique des documents. Vous trouvez ça bateau ? Pourtant je remarque que l’on a tendance à baliser les documents de manière à les adapter à la feuille de style que l’on a déjà, plutôt que d’adapter la feuille de style aux documents ! Cela passe par une analyse approfondie des documents existants, par la création d’une feuille de style CSS souple et par la capacité de remettre son travail en question selon la nature des documents à venir.

Linkographie

Publié le par Bruno Bichet