Le langage HTML/Titres et paragraphes
Un document HTML doit être structuré correctement afin d'être bien compris par les lecteurs humains ainsi que les programmes informatiques (par exemple les robots d'indexation des moteurs de recherche). « structuré correctement » signifie divisé en titres, sous-titres et paragraphes.
Cette partie présente la façon de spécifier le découpage du document. Vous remarquerez sûrement que les exemples ont un affichage qui ressemble au web d'il y a dix ans, mais l'important est de structurer correctement vos documents. L'habillage de ceux-ci est expliqué dans le livre sur le CSS (et l'intégration dans la code HTML dans son chapitre Interface HTML). On ne dirait pas comme ça mais c'est un point très important : la séparation entre contenu pour le HTML et aspect visuel pour les CSS est un élément capital pour un site moderne.
Les paragraphes
modifierLa balise p
modifier
La balise p sert à créer un paragraphe. Habituellement, il est isolé par défaut du reste du texte par un petit espace vertical avant et après (typographie anglaise[1]), mais vous pouvez changer ça avec les fameux CSS. De plus, le texte va automatiquement à la ligne à la fin d'un paragraphe.
- Exemple
<body>
<p>Voici un paragraphe.</p>
<p>En voici un deuxième.</p>
</body>
- ce qui donne
Voici un paragraphe.
En voici un deuxième.
La balise p indique bien un paragraphe (nature de la portion de texte) et non pas un saut de ligne (forme). On ne doit pas mettre de paragraphe vide. Voir ci-dessous pour avoir un blanc vertical plus grand.
Retours à la ligne
modifierComme on l'a vu précédemment, les retours de ligne sont interprétés comme une espace. Pour placer un retour de ligne au sein d'un paragraphe, on utilise la balise <br>[2] (break).
L'utilisation de plusieurs balises <br> successives est à proscrire ; il s'agit d'un retour de ligne et pas d'un saut de ligne. Rappelez-vous que le HTML concerne la description de contenu et pas la mise en forme. Pour définir une espace vertical entre deux paragraphes, il faut avoir recours au CSS ; par exemple, pour un paragraphe ponctuel, on pourra utiliser
<p style="margin-top:20px">
…
</p>
pour avoir un espace de 20 pixels (cet espacement ne change pas si l'on modifie la taille de la police), ou bien
<p style="margin-top:2em">
…
</p>
pour avoir un espace de 2 fois la largeur du caractère M (cet espacement est proportionnel à la taille de la police).
Ligne de séparation
modifierIl est possible de mettre une ligne de séparation entre deux paragraphes, avec la balise <hr />[3] (horizontal ruler).
Alinéa
modifierL'alinéa est possible en ajoutant une règle CSS utilisant la propriété text-indent :
Soit directement sur chaque élément de paragraphe :
<p style="text-indent:2em;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
</p>
<p style="text-indent:2em;">
Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
</p>
Soit en ajoutant la règle à la feuille de style de la page :
p {
text-indent:2em;
}
Ce qui donne :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
Les titres : balises h
modifier
Les titres et le sous titres sont indiqués par la balise h1 à h6 (heading — six niveaux de titres sont possibles).
Le niveau 1 est le niveau le plus haut dans la hiérarchie du document, suivi du niveau 2, etc.
Exemple :
<body>
<h1>Un titre de niveau 1 (un gros titre)</h1>
<p>Un paragraphe.</p>
<h2>Un titre de niveau 2 (un sous titre)</h2>
<p>Un paragraphe.</p>
<h3>Un titre de niveau 3 (un sous-sous titre)</h3>
<p>Etc.</p>
</body>
Ce qui donne quelque chose comme :
Un titre de niveau 1 (un gros titre)
Un paragraphe.
Un titre de niveau 2 (un sous titre)
Un paragraphe.
Un titre de niveau 3 (un sous-sous titre)
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…
- Attention
- Il ne faut pas choisir un titre pour son rendu (taille du texte affiché) mais pour son importance dans la hiérarchie. Ainsi, on ne mettra pas un titre de niveau 2 lorsqu'il s'agit du titre principal. La taille, couleur etc. des titres sera ensuite modifiable en… CSS, vous commencez à comprendre.