Les Balises d'En-Tête

Parmi les différentes parties qui forment la structure d’un document se trouve le(s) titre(s). Le langage HTML (HyperText Mark-up Language) pourvoit des balises nécessaires pour créer des en-têtes ou titres dans les pages web. Ces en-têtes sont conçus sur des valeurs prédéfinies pour afficher le contenu qu’ils encadrent.
Mais pour un document qui utilise un style il peut s’avérer nécessaire de réviser les valeurs par défaut assignées à ces en-têtes.

Les balises de titre

Le HTML compte six niveaux de balises d’en-tête ou de titre de documents et de sections de document. Le nom des six balises correspondant aux six niveaux de titre débute par la lettre ‘h’ suivie d’un chiffre indiquant le niveau ou rang. Ce sont donc les éléments h1, h2, h3, h4, h5 et h6. Ces éléments ont des tailles particulières, de la plus grande à la plus petite, qui leur confèrent une hiérarchie.

Valeurs et correspondance

Les valeurs prédéfinies et couramment utilisées pour les six balises de titre sont à peu près:

 h1  {font-size: 2em; margin: .67em 0em}
 h2  {font-size: 1.5em; margin: .75em 0em}
 h3  {font-size: 1.17em; margin: .83em 0em}
 h4  {font-size: 1em; margin: 1.2em 0em}
 h5  {font-size: .83em; margin: 1.5em 0em}
 h6  {font-size: .75em; margin: 1.67em 0em}
 h1,h2,h3,h4,h5,h6   {font-weight: bolder}

Note: L’élément h4 est particulier. Il n’aurait pas de valeur de police au départ. Mais par calcul, on trouve bien une valeur approchée de 1em. Pour ceux que ça intéresse, la différence entre h1 et h2 est de 0.5 et celle entre h2 et h3 de 0.33em. Il y a un intervalle de 0.17 entre 0.5 et 0.33 Cet écart de 0.17 à partir de 0.33 (dans le sens décroissant) nous amène à 0.16 et en soustrayant 0.16 de 1.17em on obtient 1.01em qu’on peut arrondir à 1em pour la taille de police de h4. Pour la marge elle devrait vraisemblablement être entre 1em et 1.3em

Maintenant il faut savoir que les tailles de police sont données par rapport à une base de 100% du corps (body en anglais); base qui d’après les documentations en la matière correspond à une police de 16px ou 1em. En conséquence pour garder la proportionnalité il faut réajuster les valeurs des en-têtes lorsqu’à un endroit donné on a changé de valeur de base. Autrement on introduit une incohérence de tailles entre les titres et le reste du texte.

Par exemple si la taille de police est mise à 100% dans le corps c.-à-d. body{font-size: 100%} les valeurs précédentes conviennent. Mais si dans un paragraphe ou une section (div) on change la taille de police, par exemple div{font-size: 110%} alors il faut redimensionner les balises de titre en leur donnant d’autres tailles comme:

 h1  {font-size: 220%}
 h2  {font-size: 165%}
 h3  {font-size: 128.7%} /* rigoureusement, mais peut être 128% */
 h4  {font-size: 110%}
 h5  {font-size: 91.3%}
 h6  {font-size: 82.5%}

Les marges peuvent avoir les mêmes valeurs mais on peut les changer aussi. Quant au style de police, il restera à "plus gras" (font-weight: bolder).

Autres indications

i -/ Il faut utiliser les balises de titre en essayant de ne pas les intervertir dans leur ordre. Dans un document, un paragraphe ou une section il ne faut pas utiliser un en-tête ou un titre de rang inferieur avant un titre de rang plus élevé. Par exemple, utiliser un élément h3 avant un élément h2. En d’autres termes la taille d’un sous-titre ne devrait pas dépasser la taille d’un titre immédiatement supérieur.

ii -/ Il y a des sites comme celui-ci ou cet autre qui recommandent aussi d’éviter les sauts entre balises de titre et je partage cet avis. Après une balise h1 ou h2 il ne faut pas sauter pour aller à la balise h4 et suivants. Je suis concerné par ceci; en effet le modèle que j’utilise fait une entorse à cette règle mais ce sera bientôt corrigé.

iii -/ On pense qu’il ne devrait avoir qu’une seule balise h1 par document ou article et que dans tous les cas il faut vraiment limiter leur nombre au plus bas possible. Ça aussi me paraît logique.

Mot de fin

Voilà pour l’information non-exhaustive à propos des balises de titre que je voulais partager. Je ne sais pas si vous faites partie des personnes qui suivent les principes relatifs aux éléments h1 à h6. Si vous en faites partie alors bravo, beaucoup ne suivent pas ces principes. C’est souvent par ignorance; d’autant plus qu’on trouve aujourd’hui tout un mélange de personnes de divers horizons dans le domaine. Les technologies fascinent et attirent des gens qui font les choses avec un coupable laisser-aller. Attention je ne veux ni décourager ni empêcher des gens à s’intéresser aux TIC. Moi-même je suis un aventurier qui n’a pas été dans une université pour recevoir un savoir dit formel en HTML-CSS (comme si un savoir peut être informel; mais bon passons).

Mais lorsqu’on veut faire quelque chose il faut un peu essayer de le faire le plus dans l’esprit de la chose. J’ai trouvé un modèle gratuit enligne et quand j’ai jeté un coup d’œil dans le code j’ai vu qu’on a rassemblé différents éléments de titre pour leur donner une même taille de police. Si bien que vous avez le même résultat avec un h1 ou un h3. Je suis resté là un peu hébété à me demander "mais quelle est la psychologie de ce type? Donc pour lui les titres et sous-titres doivent avoir la même taille?"

© Copyright 2011-2012. United Kingdom of Love - Tous droits réservés.