Le blog de Philippe Poisse

Structure

Les titres doivent être réalisés avec les balises H1, H2, H3, H4, H5 et H6.
Les numéros sont importants, ils indiquent la « filiation » en balise.
Pour être clair une balise H6 doit être l’enfant d’une balise H5 ; une balise H5 doit être l’enfant d’une balise H4 ; et ainsi de suite.
Le nombre de balise n’est pas fixé. Vous pouvez en mettre autant que vous le désirez.
Par contre je recommande de n’utiliser qu’une seule balise H1. Elle servira de titre à la page.
En gros, ressortez vos cours du lycée et pensez à faire des plans quand vous rédigez.

Petites capitales

Il est fréquent de voir des titres écrits en capitale (à ne pas confondre avec des majuscules). L’erreur la plus répandue est de taper directement le texte en capitale (en verrouillant la touche cap-lock).
Votre texte doit toujours être tapé en minuscule. Puis vous le passez en capitale avec un peu de CSS.
Deux raisons à cela :

• En termes d’accessibilité numérique cela limitera les erreurs pour les synthèses vocales, car il est très facile de taper des caractères accentués en minuscule.
• Si vous désirez changer la présentation de vos titres vous n’aurez pas à retaper le texte.

Pour mettre en capitale le CSS offre deux possibilités : « text-transform: uppercase ;» et « font-variant: small-caps; ». Si votre balise H1 par exemple contient le texte suivant « Le titre de la page » la propriété « text-transform: uppercase » donnera ça : Le titre de la page ; alors que la propriété « font-variant: small-caps; » donnera : Le titre de la page.
Dans la mesure du possible la propriété font-variant est à préférer, surtout si vos titres contiennent des noms propres, bien que certaines polices de caractères puissent poser quelques soucis.
Au final, comme c’est souvent le cas en programmation, il faudra faire quelques essais avant de mettre en ligne.

Marges

Dans une composition soignée il est bon d’éviter de sauter des lignes, par exemple avec ce type de code « <p><br /></p> ».
Les marges supérieures et inférieures doivent être réalisées avec du CSS. On utilise donc la propriété « margin ».
Plus le niveau de titre est bas (c’est-à-dire plus le nombre qui suit le H est élevé) moins les marges doivent être importantes. En clair, la marge inférieure d’une balise H1 doit être plus importante que celle d’une balise H2, qui sera plus importante que celle d’une balise H3, etc.
Le petit hic c’est que lorsque deux balises de titres se suivent les marges se cumulent. Ça devient vite disgracieux, votre page ayant beaucoup de blancs inutiles, qui perturbent le gris typographique.
La solution est toute simple, il faut prévoir les juxtapositions des balises (et pas seulement des balises de titres d’ailleurs).
L’exemple sans doute le plus utile est celui-ci : H1 + H2 { margin-top : 0;}.
Dans cet exemple une balise H2 suivant directement une balise H1 n’aura pas de marge supérieure.
En jouant finement sur les juxtapositions on arrive un gris typographique de qualité qui améliore l’expérience utilisateur, comme on dit maintenant.