Le langage HTML/Titres et paragraphes

Un livre de Wikilivres.
Aller à : navigation, rechercher


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[modifier | modifier le wikicode]

La balise p[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

Comme 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 paragraphe, 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[modifier | modifier le wikicode]

Il est possible de mettre une ligne de séparation entre deux paragraphes, avec la balise <hr />[3] (horizontal ruler).

Les titres : balises h[modifier | modifier le wikicode]

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.

Notes[modifier | modifier le wikicode]

  1. en typographie française, les paragraphes ne sont pas séparés par des espaces verticaux, mais la première ligne est décalée vers la droite (retrait de paragraphe ou « alinéa rentrant »)
  2. En XHTML, cela sera <br />
  3. même remarque que précédemment, en HTML « simple », cela sera <hr>