Mettre en place une hiérarchie de titres

Dans cet article, nous verrons comment ajouter des titres de différents niveaux à un document web afin que les lecteurs puissent identifier le contenu et trouver les réponses à leurs questions plus efficacement.

Pourquoi utiliser des titres ?

Les titres forment le squelette d'un texte sans fournir de longues explications. Prenons un exemple simple : même si ces deux textes sont en anglais, lequel semble le plus clair ?

Voilà une bonne partie de la réponse à la question posée avant.

Comme vous pouvez le voir, un lecteur utilisera les titres et leurs niveaux pour déterminer quel contenu est présent et s'il est utile de poursuivre la lecture pour trouver le contenu recherché. Nous passons généralement très peu de temps sur une page web et consulter les titres fait partie du processus que nous déroulons pour déterminer s'il faut rester sur la page ou la quitter. Pour cette raison, il est préférable d'avoir une organisation claire pour les titres afin que le lecteur se repère facilement et continue à consulter la page.

Vous faut-il plus d'arguments ? Savez-vous que certaines personnes ne lisent pas les pages web mais les écoutent grâce à des logiciels appelés lecteurs d'écrans. Ces logiciels permettent d'accéder rapidement à un contenu textuel donné. Parmi les techniques utilisées par ces logiciels, de nombreuses se basent sur les titres. Si les titres ne sont pas définis, pensez-vous que ces visiteurs prendront la peine d'écouter l'intégralité du document ?

Enfin, le plan d'un document, composé des titres, est souvent utilisé par les moteurs de recherche pour déterminer la pertinence d'un article sur un sujet de recherche donné. Chaque niveau de titre (de 1 à 6) aura un « poids » différent : un titre de niveau 1 sera jugé plus pertinent qu'un titre de niveau 2 et ainsi de suite.

Les titres HTML

HTML fournit des éléments qui permettent de créer des titres dans des documents HTML : ce sont les éléments <h1>, <h2> et jusqu'à <h6>.

Ajouter le titre principal

Au début du document, vous pouvez écrire le titre de plus au niveau entre des balises <h1> :

<h1>Améliorez vos compétences sur le Web !</h1>

Si vous considérez le document comme un arbre, le tronc sera le titre <h1>. Cela implique qu'un document ne doit avoir qu'un seul titre de niveau 1. Continuons les explications car ce sujet revient souvent dans les discussions. D'un point de vue technique, rien ne vous empêche d'utiliser plusieurs titres de niveau 1 dans vos documents. Cependant, d'un point de vue sémantique, cela serait bizarre car un titre de niveau 1 introduit un sujet totalement différent. Si vous jugez nécessaire d'avoir plusieurs titres de niveau 1 dans votre document, cela signifie peut être que le document doit être découpé en plusieurs documents dont chacun aurait un titre de niveau 1 distinct.

Un autre argument en faveur d'un unique titre de niveau 1 serait l'impact sur le référencement. Ce point est plus discutable car les algorithmes des moteurs de recherche sont des secrets bien gardés, cela dit, certaines observations tendent à montrer que les niveaux de titres ont un impact sur le classement d'un site et que plus un niveau de titre est utilisé, plus l'impact sur le classement s'affaiblit.

Ajouter des sous-titres

Sauf si votre document est très court, vous devrez le découper en sections. Chaque section commence avec un titre <h2> :

...
<h2>Organisez la structure de votre document avec HTML</h2>
...
<h2>Ajustez le style de votre document avec CSS</h2>
...

Si besoins, vous pouvez découper vos sections en sous-sections et ainsi de suite en utilisant des éléments <h3> jusqu'à <h6>. Cela dit, si vous arrivez à un niveau de découpage avec <h4> voire inférieur, cela peut signifier que votre document est trop long et qu'il serait préférable de le découper pour en faciliter la lecture.

Lorsque vous créer des sections et sous-sections, il y a quelques points à prendre en compte afin d'améliorer l'expérience du lecteur :

Gardez une hiérarchie cohérente

Autrement dit, cela signifie que vous devriez éviter de sauter des niveaux de titres (par exemple passer directement d'un niveau <h1> ou <h2> à un niveau <h4>). Vos lecteurs, notamment ceux qui utilisent des lecteurs d'écran, pourraient penser que quelque chose manque à votre page.

Utilisez les niveaux de titre pour leur sémantique et non pour leur mise en forme

Le rôle de HTML est de fournir des informations sémantiques (sur le sens). La mise en forme par défaut d'un élément HTML donné n'a pas de rôle particulier et peut être modifiée avec CSS. Lorsqu'on s'occupe des titres, on peut utiliser la propriété CSS font-size afin de modifier la taille de la police utilisée.

N'utilisez pas les niveaux de titres pour représenter des sous-titres ou des slogans

Une des notions qui manque à HTML est le fait de ne pas avoir d'éléments particulier pour représenter un sous-titre ou un slogan. Certains développeurs utilisent les éléments de titre à cet effet mais cela entraîne des cassures dans la hiérarchie des titres et pose des problèmes d'accessibilité. Bien qu'il y ait quelques tentatives pour résoudre ce problème avec l'élément <hgroup>, il est préférable d'utiliser un élément <p> ou <span> avec un attribut class donné.

Gérer des niveaux de titre dynamiques

L'élément <section> est apparu avec HTML5 pour marquer les différentes sections d'un document HTML, chacune de ces sections étant a priori suivie d'un titre approprié.

Supposons que votre plan évolue (ce qui peut arriver si le HTML est généré de façon dynamique par le serveur) et que vous décidiez que certains <h3> devraient en fait être des <h2>. De même, si vous compilez plusieurs pages web en un e-book, cela peut être ennuyant que d'avoir à revoir tous les différents titres.

Si vos <section> sont imbriquées de façon logique, HTML5 indique que chaque section peut commencer avec <h1> et que ceux-ci continueront à former un plan valide. L'idée est plutôt bonne mais souffre de quelques inconvénients : le code est moins lisible et il n'est plus possible d'appliquer une mise en forme différente pour les <h1> si ceux-ci n'ont pas la même importance.

Pour plus de détails, lire l'article Sectionnement et plan d'un document HTML5.

En savoir plus

• Les éléments de titre