Les titres, à l'instar des paragraphes, permettent de structurer le contenu de vos pages web. Un document bien structuré sera plus compréhensible par les lecteurs ainsi que par certains logiciels informatiques tels que les moteurs de recherche ou les lecteurs d’écran dédiés aux personnes présentant un handicap visuel.

6 niveaux de titres

Le langage HTML propose 6 niveaux de titres de H1 à H6 (Headings) : Le niveau 1 étant le niveau le plus haut dans la hiérarchie du document, suivi du niveau 2, etc.

Il convient de respecter l'ordre hiérarchique des titres : un titre de niveau 2 sera toujours situé sous un titre de niveau 1, un titre de niveau 3 sous un titre de niveau 2…

On ne devra donc pas rencontrer dans vos page web la structure H1 > H3 > H2 mais la la hiérarchie suivante : H1 > H2 > H3

Le titre de niveau 1 correspond au titre de la page web. Une page web ne contenant par usage qu’un seul titre H1 votre interface d’édition ne vous offre pas la possibilité de définir d’autres titres de niveau 1.

La page peut ensuite contenir plusieurs titres de même niveau comme dans l'exemple ci-dessous.

Niveaux de titre
Attention :
Il ne faut pas choisir un titre pour son style (taille du texte affiché ou couleur) mais pour son importance dans la hiérarchie.
Les styles associés aux différents niveaux de titre sont des éléments de la charte web graphique de l’établissement. Cette charte garantit la cohérence des sites web d'AMU, aussi, n'ajoutez aucune mise en forme supplémentaire sur les titres.

A propos des tailles

Les tailles sont exprimées dans une unité relative à la taille du texte des paragraphes.

La taille du texte de base (1em) servant de référence aux différents niveaux de titre correspond à une taille voisine de 11.5 pixels. 

Cette valeur de 11.5 pixels pourra varier en fonction de la configuration du navigateur web du visiteur. Par défaut la taille de référence des navigateurs est de 16 pixels.

La charte préconise une taille de base inférieure de – 28% à cette valeur soit environ 11.5 pixels.

Ainsi un titre de niveau 2 ayant une taille de 1.5em sera 50% plus grand que le texte de base soit environ 17.2 pixels. Un titre de niveau 6 ayant une taille de 0.75em aura une taille inférieure de 25% à celle du texte de base soit environ 8.6 pixels.

En pratique :

Les différents niveaux de titres applicables sont disponibles depuis le menu déroulant intitulé format.

Pour appliquer un niveau de titre :

  1. Saisir le texte du titre
  2. Placer le curseur de la souris n’importe où au niveau du texte saisi.
  3. Sélectionner un niveau de titre dans le menu déroulant.

Pour supprimer un niveau de titre :

  1. Placer le curseur de la souris n’importe où au niveau du texte du titre.
  2. Sélectionner le niveau de titre préexistant dans le menu déroulant

Lire aussi

Les 5 grands principes de la rédaction Web