Titres et paragraphes

HTML a six niveaux de titre, de h1 à h6, et les utilisateurs de lecteurs d'écran sautent souvent de titre en titre pour s'orienter dans une page.

Un plan fait de titres

Pense à un livre de recettes. Le livre a un titre, chaque recette a un nom, et chaque recette a des parties plus petites comme Ingrédients et Préparation. HTML exprime le même plan avec six éléments de titre, de <h1> à <h6>. <h1> est le niveau le plus haut, en général le titre de la page. <h2> marque les sections principales, <h3> les parties d'une section, et ainsi de suite. La plupart des pages n'ont jamais besoin de plus de trois ou quatre niveaux.

<h1>Weekend Baking</h1>
<p>Three simple breads you can make at home.</p>

<h2>Soda bread</h2>
<h3>Ingredients</h3>
<p>Flour, baking soda, salt and buttermilk.</p>
<h3>Method</h3>
<p>Mix, shape into a round and bake for 40 minutes.</p>

<h2>Flatbread</h2>
<p>Ready in 20 minutes, no oven needed.</p>

Choisis le niveau selon la structure, pas selon la taille

Les navigateurs dessinent <h1> en grand et <h6> en petit, et il est tentant de choisir un titre pour sa taille. Résiste. Le niveau indique aux logiciels comment la page est organisée. Les lecteurs d'écran peuvent lister tous les titres d'une page et laisser l'utilisateur sauter directement à l'un d'eux, un peu comme une table des matières. Les moteurs de recherche utilisent aussi les titres pour comprendre le sujet d'une page. Si tu veux qu'un h2 paraisse plus petit, garde-le en h2 et change sa taille avec CSS.

Deux habitudes gardent le plan propre. D'abord, utilise un seul <h1> par page pour son titre principal ; MDN le recommande, et c'est ce qu'attendent la plupart des utilisateurs. Ensuite, ne saute pas de niveau en descendant : après un h2 vient un h3, pas un h5. Remonter ne pose pas de problème : un h3 peut être suivi d'un nouveau h2 quand la section suivante commence.

Les paragraphes

Le texte courant se place dans des éléments <p>, un par paragraphe. Comme HTML réduit les espaces, appuyer deux fois sur Entrée dans ton fichier ne crée pas de nouveau paragraphe à l'écran ; seul un nouveau <p> le fait. Par défaut, les navigateurs ajoutent un espace au-dessus et en dessous de chaque paragraphe, ce que CSS peut modifier. Un paragraphe ne peut pas contenir un autre paragraphe ni un titre : si tu oublies une balise fermante </p>, le navigateur la ferme pour toi dès que l'élément de bloc suivant commence.

Parfois, les retours à la ligne font eux-mêmes partie du contenu, comme dans une adresse postale ou un poème. Dans ce cas, utilise <br> à la fin de chaque ligne dans un seul paragraphe ou dans <address>. N'empile pas des <br> pour créer de l'espace vertical ; c'est le rôle des marges CSS. Pour marquer un changement de sujet dans une section, comme un changement de scène dans un récit, utilise <hr>, la rupture thématique, que les navigateurs dessinent comme un trait horizontal.

Les citations

Une citation longue tirée d'une autre source se place dans <blockquote>, que les navigateurs mettent en retrait. Place les paragraphes cités à l'intérieur, et tu peux donner l'adresse de la source dans son attribut cite. Une citation courte au milieu d'une phrase utilise <q>, et le navigateur ajoute les guillemets pour toi. L'élément <cite> marque le titre d'une œuvre, comme un livre ou un film.