Structurer le texte en HTML : titres, paragraphes et listes
Un texte bien structuré est plus agréable à lire, plus facile à parcourir et mieux compris par les navigateurs comme par les moteurs de recherche. Dans ce cours, nous passons en revue les balises HTML qui organisent le contenu : les paragraphes, les six niveaux de titre, les listes, les citations et les balises de mise en valeur. J’ai entièrement mis à jour cet article de 2017 : chaque comportement décrit ici a été mesuré dans Chrome 151 pendant la rédaction.
Petite précision avant de commencer : les balises d’architecture comme header, section ou footer découpent la page en grandes zones. Les balises de ce cours travaillent un cran plus bas : elles organisent le texte à l’intérieur de ces zones.
Les paragraphes avec la balise p
La quasi-totalité du texte d’une page web s’écrit dans des paragraphes, donc dans des éléments p. C’est une balise de type block, une notion détaillée dans le cours sur les balises inline et block : mesuré dans Chrome pendant la rédaction, un paragraphe occupe toute la largeur disponible de son conteneur et reçoit par défaut une marge de 16 px au-dessus et en dessous. C’est cette marge qui crée l’espace vertical entre deux paragraphes, sans que vous ayez quoi que ce soit à écrire de plus.
<p>Premier paragraphe : le navigateur l'espace tout seul du suivant.</p>
<p>Second paragraphe, avec un retour à la ligne<br />au milieu de la phrase.</p>La balise orpheline br force un retour à la ligne à l’intérieur d’un paragraphe. Réservez-la aux cas où le retour à la ligne fait partie du contenu : une adresse postale, un poème, des paroles de chanson. Partout ailleurs, fermez le paragraphe et ouvrez-en un nouveau.
L’erreur classique consiste à enchaîner deux br pour « sauter une ligne ». J’ai comparé les deux approches dans Chrome : deux vrais paragraphes occupent 52 px de haut, un paragraphe unique coupé par un double br en occupe 54. Visuellement, c’est presque identique ; sémantiquement, la version au double br ne forme plus qu’un seul bloc de texte, et vous perdez la possibilité de régler proprement l’espacement. Si vous voulez plus ou moins d’espace entre les paragraphes, c’est une affaire de marges CSS, pas de balises supplémentaires.
Les titres : six niveaux, un seul h1
HTML propose six niveaux de titre, de h1 à h6. Mesurées dans Chrome 151 avec la taille de texte par défaut (16 px), leurs tailles sont dégressives : 32 px pour h1, 24 px pour h2, 18,72 px pour h3, 16 px pour h4, 13,28 px pour h5 et 10,72 px pour h6, le tout en gras (graisse 700). Dans la pratique, les trois derniers niveaux servent rarement : sur ce blog, je n’utilise que h1, h2 et h3.
La règle la plus importante : un seul h1 par page, qui annonce le sujet principal. Ne le confondez pas avec la balise title, qui s’affiche dans l’onglet du navigateur et se place dans le head, comme expliqué dans 5 balises à connaître pour le head. Ensuite, la hiérarchie doit rester logique : des h2 pour les grandes parties, des h3 pour leurs sous-parties, sans sauter de niveau. Un h3 sans h2 au-dessus, c’est comme un 1.1.1 sans chapitre 1.1 dans un rapport.
Autre erreur à proscrire : choisir une balise de titre pour sa taille d’affichage (un h5 parce que « ça fait la bonne taille » pour du texte courant). La balise décrit le rôle du texte, la taille se règle en CSS. Et n’espérez pas que le navigateur corrige la structure à votre place : j’ai vérifié qu’un h1 imbriqué dans plusieurs balises section garde ses 32 px dans Chrome 151. L’ancien mécanisme qui réduisait automatiquement la taille des h1 imbriqués a disparu ; la hiérarchie que vous écrivez est celle qui s’affiche.
<h1>Apprendre la guitare</h1>
<h2>Choisir son instrument</h2>
<h3>Guitare classique ou folk ?</h3>
<h3>Quel budget prévoir ?</h3>
<h2>Les premiers accords</h2>Les listes : ul, ol et li
Deux balises créent des listes : ul (unordered list) pour les listes à puces, quand l’ordre des éléments n’a pas d’importance, et ol (ordered list) pour les listes numérotées, quand il en a une (étapes d’une recette, classement, procédure). Dans les deux cas, chaque élément de la liste s’écrit dans une balise li.
<p>Les ingrédients :</p>
<ul>
<li>250 g de farine</li>
<li>3 œufs</li>
<li>50 cl de lait</li>
</ul>
<p>Les étapes :</p>
<ol>
<li>Mélanger la farine et les œufs</li>
<li>Ajouter le lait progressivement</li>
<li>Laisser reposer une heure</li>
</ol>Côté rendu par défaut, mesuré dans Chrome pendant la rédaction : une liste ul affiche des puces rondes pleines (disc), une liste ol numérote en chiffres (decimal), et les deux décalent leur contenu de 40 px vers la droite. Détail élégant : si vous imbriquez une ul dans une autre, le navigateur passe tout seul les puces du second niveau en cercles vides (circle) pour distinguer les niveaux. Tout cela se personnalise ensuite en CSS : type de puce, retrait, style de numérotation.
strong et em : du sens, pas de la décoration
Pour faire ressortir un mot ou un groupe de mots, deux balises portent du sens. La balise strong marque une importance forte et s’affiche en gras (graisse 700 mesurée dans Chrome). La balise em marque une emphase, une insistance, et s’affiche en italique. Il existe aussi mark, qui surligne son contenu : fond jaune pur par défaut (rgb(255, 255, 0) mesuré), modifiable en CSS.
Vous croiserez aussi b (gras) et i (italique). À l’écran, la différence est nulle : j’ai comparé les styles calculés dans Chrome, b affiche exactement la même graisse 700 que strong, et i le même italique que em. La différence est dans le sens : strong et em disent « ce passage est important » aux programmes qui lisent votre code, b et i disent seulement « mettez ça en gras ou en italique ». Ma recommandation pour débuter est simple : utilisez strong et em quand le contenu mérite d’être mis en avant, et gardez la décoration purement visuelle pour le CSS, comme nous le verrons dans le cours sur la mise en forme du texte en CSS.
Un mot enfin sur u, qui souligne son contenu : évitez-la pour de la simple décoration. Sur le web, un texte souligné est perçu comme un lien, et un « lien » qui ne réagit pas au clic est frustrant pour le visiteur.
<p>Attention : ce four chauffe <strong>très fort</strong>.</p>
<p>Je ne dis pas que c'est faux, je dis que c'est <em>incomplet</em>.</p>
<p>Pensez à réviser <mark>les balises de titre</mark> avant le quiz.</p>blockquote pour les citations
Quand vous reprenez le propos de quelqu’un d’autre (un extrait d’article, une documentation, un témoignage), placez-le dans une balise blockquote. Par défaut, Chrome la met en retrait de 40 px à gauche et à droite, avec 16 px de marge au-dessus et en dessous (valeurs mesurées pendant la rédaction) : la citation se détache visuellement du reste du texte avant même la moindre ligne de CSS. L’attribut cite permet d’indiquer l’adresse de la source directement dans la balise.
<blockquote cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/blockquote">
<p>L'élément blockquote indique que le texte qu'il contient est une citation longue.</p>
</blockquote>Et maintenant ?
Vous savez désormais structurer le texte d’une page : des paragraphes pour le corps du texte, une hiérarchie de titres avec un h1 unique, des listes à puces ou numérotées, des citations dans des blockquote, et strong ou em quand un passage mérite d’être mis en avant. Le fil conducteur ne change pas : la balise décrit le sens du contenu, la mise en forme reste l’affaire du CSS.
Prochaine étape, l’élément qui a donné son nom au HyperText : les liens. Et si un point de ce cours reste flou, dites-le-moi en commentaire, je mets l’article à jour en fonction de vos retours.