Trucsweb.com

Trucsweb.com

HTML

HTML5

RDFFav

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

Les éléments de titre servent à structurer le contenu de la page principalement pour l’accessibilité et les moteurs de recherche.HTML5 - h1-h6 : Les éléments de titre

Arbre

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 !

Exemple :
<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>
HeadingsMap
Exemple logique extrait par HeadingsMap mais invalide pour Google!
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 !


Valider la structure logique de vos pages

Personnellement, j’installe dans Firefox le module complémentaire « HeadingsMap » qui extrait à merveille la structure logique de’une page Web. Ce petit module fort utile est disponible pour Firefox, Chrome et Edge.


Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

10/10 sur 1 revues.
       Visites : 110 - Pages vues : 127
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@