Texte et structure

Cours · HTML : structurer le Web (école d'ingénieur), chapitre 2 · école d'ingénieur, informatique · le début du chapitre, la suite sur Adloun

Un texte sans structure est un mur de mots. Un livre a des parties, des chapitres, des paragraphes, des listes, des mots mis en valeur ; un lecteur les repère d'un coup d'œil, et s'oriente grâce à eux. Une page web aussi. Ce chapitre présente les éléments qui donnent sa structure au texte d'une page, et écrit la page « À propos » de la Librairie du Campus.

Objectifs du chapitre

Construire un plan de page avec les titres <h1> à <h6>, sans sauter de niveau.
Écrire paragraphes et listes (à puces, numérotées, de définitions).
Choisir l'élément qui dit le sens d'un mot : <strong>, <em>, <abbr>, <time>…
Écrire les caractères spéciaux, et distinguer éléments de bloc et éléments en ligne.

2.1 Les titres et le plan de la page

HTML offre six niveaux de titres, de <h1> (le plus important) à <h6>. Ils ne servent pas à écrire « plus gros » : ils dessinent le plan de la page, comme la table des matières d'un livre.


<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Plan d'un document</title>
  </head>
  <body>
    <h1>Guide de l'étudiant</h1>
    <h2>S'inscrire</h2>
    <h3>Les pièces à fournir</h3>
    <h3>Les dates limites</h3>
    <h2>Se loger</h2>
    <h3>Les résidences universitaires</h3>
    <h3>La colocation</h3>
    <h2>Se restaurer</h2>
  </body>
</html>

Le navigateur affiche ces titres en caractères gras de tailles décroissantes. Mais surtout, ils forment l'arbre suivant, que lisent les lecteurs d'écran (pour sauter de rubrique en rubrique) et les moteurs de recherche (pour comprendre de quoi parle la page) :

Proposition 2.1Règles des titres

Une page a un seul <h1> : le sujet de la page.
On ne saute pas de niveau en descendant : un <h3> suit un <h2> ou un autre <h3>, jamais directement un <h1>. En remontant, on peut revenir à n'importe quel niveau supérieur.
On choisit le niveau d'après la place dans le plan, jamais d'après la taille de police souhaitée : la taille se règle en CSS.

Méthode — vérifier le plan d'une page

Lire uniquement les titres, du premier au dernier, en indentant selon leur niveau. On doit obtenir une table des matières qui a un sens à elle seule. Si un titre semble orphelin ou mal placé, le plan est faux.

2.2 Paragraphes, espaces et retours à la ligne

2.2.1 L'espace blanc se replie


<p>Ces     mots     sont
   séparés par      beaucoup
   d'espaces.</p>

Le navigateur affiche : « Ces mots sont séparés par beaucoup d'espaces. », sur une seule ligne si la fenêtre est assez large.

Proposition 2.2Repli des blancs

Dans le contenu d'un élément, toute suite d'espaces, de tabulations et de retours à la ligne est affichée comme une seule espace. Le retour à la ligne à l'écran dépend de la largeur de la fenêtre, pas de celui du code.

C'est ce qui permet d'indenter son code librement. C'est aussi pourquoi l'on n'aère jamais une page en tapant des espaces ou des lignes vides : on découpe le texte en éléments, et l'espacement se règle en CSS.

2.2.2 Paragraphe, retour à la ligne, séparation


<p>Une adresse se coupe en lignes :<br>
  12, rue des Écoles<br>
  75005 Paris</p>
<hr>
<p>Un nouveau sujet commence après le trait.</p>

<p> est un paragraphe : un bloc de texte sur un même sujet. Le navigateur le sépare des autres par un espace vertical.
<br> (élément vide) force un retour à la ligne à l'intérieur d'un texte où la coupure fait partie du contenu : une adresse postale, les vers d'un poème.
<hr> (élément vide) marque un changement de sujet entre deux paragraphes ; le navigateur l'affiche comme un trait horizontal.

n'est pas un espaceur

Écrire <br><br><br> pour descendre un texte, ou finir chaque phrase par <br> au lieu de faire des paragraphes, est une faute de structure : un lecteur d'écran annonce un seul paragraphe, et l'espacement devient impossible à régler en CSS. Un paragraphe s'écrit avec <p>.

2.3 Les listes

2.3.1 Listes à puces et listes numérotées


<ul>
  <li>Informatique</li>
  <li>Mathématiques</li>
  <li>Littérature</li>
</ul>
<ol>
  <li>Choisir un livre</li>
  <li>L'ajouter au panier</li>
  <li>Valider la commande</li>
</ol>

La suite du cours est sur Adloun

Le chapitre en entier, formules et figures comprises, avec le tuteur, les fiches, les QCM et les exercices.

Lire la suite du cours

En accès libre, sans inscription.

Exercices corrigés de ce chapitre

Lire la suite du cours →