HTML

HTML5

HTML5 - h1-h6 : Les éléments de titre

Les éléments de titre et sous-titres d’une page Web ou section d’une page communément appelés en HTML les entêtes (h1 à h6) ne servent pas à styliser votre site Web ni même à dimensionner les titres. Par défaut, ils ont effectivement une grandeur différente allant du plus grand (h1) au plus petit (h6) et généralement avec un style différent, mais c’est une erreur de les utiliser comme tell.

En réalité, les éléments de titre servent à structurer le contenu de la page principalement pour les moteurs de recherche. C’est pour cette raison que la plupart des cadriciels utilisent des classes comme .h1, .h2. .h3... pour simuler le style des entêtes sans affecter la structure logique de la page. Les éléments de titre sont par ailleurs une part importante de l’accessibilité web. Les applications pour non-voyant, par exemple, utilisent les titres et sous-titres pour se retrouver et proposer une navigation aux usagers. À lire sur le sujet : Guidance on how to create websites that meet WCAG.

Métadonnées

Avant d’aller plus loin, il faut préciser que la structure logique d’une page commence avec les balises d’entête HTML dites métadonnées. Il y a deux entêtes très importants. La première c’est le titre de la page :

<title>Mon titre - Mon site</titre>

NOTE : Généralement, on ajoute le titre du site au bout du titre de la page. Personnellement, j’utilise la barre « | » comme séparateur, mais j’ai lu dernièrement qu’il était préférable d’utiliser le titre (!) « - ».

La seconde, la balise « canonical » qui contient l’adresse de la page (!). Oui je sais, en principe l’adresse du navigateur devrait suffire alors c’est comme avouer qu’on ne sait pas faire notre travail. Même que Facebook utilise exclusivement la balise « canonical » et jamais celle du navigateur. Quoique dans le cas de Facebook c’est logique, c’est justement Facebook qui a plusieurs adresses pour la même page !! Wordpress et cie aussi ne donne pas sa place en matière d’adresse multiple.

Enfin, la norme ça ne se discute pas alors vaut mieux suivre le chemin sinueux des majors !

<link rel="canonical" href="https://[url]" />

Les entêtes

Non seulement les entêtes sont d’un extrême important dans une page Web, leur usage est très strict. La première règle est l’ordre. En haut de la page le h1. D’ailleurs, le h1 est particulier, il doit toujours être le titre de la page. Et Google recommande qu’il soit précisément le même que la balise « title ». Les puristes vous diront qu’il ne doit pas y avoir plus d’une balise d’entête h1 par page. Ce n’est plus le cas aujourd’hui, mais c’est tout à fait logique d’avoir un seul h1. Alors je le conseille toujours.

Puis il y a l’imbrication. Le h2 doit suivre le h1, le h3 suit le h2 et ainsi de suite. Donc il ne peut y avoir de h3 après un h1, il faut absolument un h2 entre les deux pour suivre la suite logique.

Ensuite, on peut revenir à tout moment en haut de la suite. h1, h2, h3, puis revenir à h2, h3, h4, h5. Et revenir à h3, h4, h5, h6...

En fait, c’est une arborescence. Figurez-vous la grosseur des branches d’un arbre, il n’y a jamais de grosse branche au fut de l’arbre. On a un seul tronc (h1), les plus grosses branches (h2) jusqu’à plus petite. On ne verra jamais au bout d’une branche un nouveau tronc !

<h1>La colonisation</h1>
  <h2>Les premiers arrivants</h2>
    <p>Texte d'introduction...</p>
    <h3>Le voyage</h3>
      <h4>Départ de Québec</h4>
        <h5>Les habitants</h5>
          <p>Texte d'introduction...</p>
          <h6>Les hommes</h6>
            <p>Texte...</p>
          <h6>Les femmes</h6>
            <p>Texte...</p>
          <h6>Les enfants</h6>
            <p>Texte...</p>
          <h6>Les animaux</h6>
            <p>Texte...</p>
  <h2>Le clergé</h2>
    <p>Texte d'introduction...</p>
    <h3>La conversion</h3>
  <h2>Nations autochtones</h2>
    <p>Texte d'introduction...</p>
    <h3>Les Algonquins</h3>
      <h4>Histoire</h4>
        <p>Texte...</p>
      <h4>Population et langue</h4>
        <p>Texte...</p>
      <h4>Art et culture</h4>
        <p>Texte...</p>
    <h3>Les Micmacs</h3>
      <h4>Histoire</h4>
        <p>Texte...</p>
      <h4>Population et langue</h4>
        <p>Texte...</p>
      <h4>Art et culture</h4>
        <p>Texte...</p>
    <h3>Les Atikamekw</h3>
      <h4>Histoire</h4>
        <p>Texte...</p>
      <h4>Population et langue</h4>
        <p>Texte...</p>
      <h4>Art et culture</h4>
        <p>Texte...</p>
    <h3>Les Abénaquis</h3>
      <h4>Histoire</h4>
        <p>Texte...</p>
      <h4>Population et langue</h4>
        <p>Texte...</p>
      <h4>Art et culture</h4>
        <p>Texte...</p>
    <h3>Les Innus (Montagnais)</h3>
      <h4>Histoire</h4>
        <p>Texte...</p>
      <h4>Population et langue</h4>
        <p>Texte...</p>
      <h4>Art et culture</h4>
        <p>Texte...</p>
    <h3>Les Inuits</h3>
      <h4>Histoire</h4>
        <p>Texte...</p>
      <h4>Population et langue</h4>
        <p>Texte...</p>
      <h4>Art et culture</h4>
        <p>Texte...</p>
    <h3>Les Cris</h3>
      <h4>Histoire</h4>
        <p>Texte...</p>
      <h4>Population et langue</h4>
        <p>Texte...</p>
      <h4>Art et culture</h4>
        <p>Texte...</p>
    <h3>Les Hurons-Wendat</h3>
      <h4>Histoire</h4>
        <p>Texte...</p>
      <h4>Population et langue</h4>
        <p>Texte...</p>
      <h4>Art et culture</h4>
        <p>Texte...</p>
    <h3>Les Mohawks</h3>
      <h4>Histoire</h4>
        <p>Texte...</p>
      <h4>Population et langue</h4>
        <p>Texte...</p>
      <h4>Art et culture</h4>
        <p>Texte...</p>
  <h2>Conclusion</h2>
    <p>Texte...</p>

Les blocs ou sections HTML

Pour terminer, les titres sont aussi obligatoires dans certains cas, notamment dans le bloc header. La W3C exige la présence d’au moins une balise de titre dans la section header :

<header>
  <h2>Sous-titre</h2>
  <p>Auteur</p>
</header>

SEO

Il va sans dire que les éléments de titre sont d’une extrême importance lorsqu’il est question de référencement. Toutefois, je trouve personnellement qu’il y a une grosse lacune dans ce système hiérarchisé. C’est parfait pour extraire l’arborescence du contenu d’une page Web, mais quand est-il de la page elle-même! Il n’y a absolument rien pour le titre du site par exemple. Bien sûr on peut l’ajouter au bout de la balise d’entête title, mais c’est carrément une patch ! Et comment un système informatique peut l’extraire à chaque fois sans faire d’erreur ? Il s’agit d’une simple convention, rien avoir avec une recommandation de la W3C.

Pire encore, j’ai toujours été embêté, car la page en elle même est souvent issue d’une section, d’une rubrique, peut être d’un chapitre. Et il n’existe aucun moyen de le décrire en HTML5. Une page HTML doit pouvoir se décrire elle-même. Prise à part dans un résultat de recherche, ne doit elle pas être en mesure de donner ses renseignements ? La logique du Web sémantique, le Web 2 si galvaudé, n’imposerait-elle pas d’avoir une structure du genre <h1>Titre du site</h1> <h2>Chapitre</h2> <h3>Rubrique</h3> <h4>Titre de la page</h4> etc. Ou mieux <title>, <chapitre> <rubrique> ?

Mais non, il faut pour ce faire utiliser l’entête HTML avec ces limites qui ne permettent pas d’être aussi précis. Ou encore des microdonnées (données structurées), généralement en JSON. Encore des patchs pour les caprices des moteurs de recherches. Pourtant le Web des années 90 était carrément basé sur l’art de la documentation avec des balises d’entête pour l’index, la page suivante, la page précédente... Probablement pas demain la veille. On a davantage de chance d’avoir un HTML6 avec des balises pour les boutiques en lignes !

Références

• <h1>-<h6> : les éléments de titre de section - MDN Web Docs
• The h1, h2, h3, h4, h5, and h6 elements - HTML 5.2, W3C Recommendation
• Guidance on how to create websites that meet WCAG
• HeadingsMap