Cours

HTML & CSS Leçon 2

Titres, paragraphes et listes

Organiser un texte avec des niveaux de titres, mettre des mots en valeur et faire des listes.

15 min

À la fin de cette leçon, tu sauras

  • Hiérarchiser une page avec les titres h1 à h6
  • Mettre en valeur un mot avec strong et em
  • Faire une liste à puces et une liste numérotée

Six niveaux de titres

HTML propose six balises de titre, de <h1> (le plus important) à <h6>. Elles fonctionnent comme le plan d'un exposé : un seul <h1> pour le sujet de la page, puis des <h2> pour les grandes parties, des <h3> pour les sous-parties…

<h1>Les avions de ligne</h1>
<h2>Les moyen-courriers</h2>
<h3>L'Airbus A320</h3>
<p>C'est l'avion le plus vendu au monde.</p>
<h2>Les long-courriers</h2>

Attention : ne choisis pas un titre pour sa taille. Si tu veux un texte plus gros, ce sera le travail du CSS. Les moteurs de recherche et les lecteurs d'écran (utilisés par les personnes aveugles) se servent de ces niveaux pour comprendre ta page.

Paragraphes et mise en valeur

Chaque bloc de texte va dans son <p>. Le navigateur ignore les retours à la ligne que tu tapes dans ton code : pour un nouveau paragraphe, il faut une nouvelle balise.

À l'intérieur d'un paragraphe, deux balises servent à insister :

<p>Pense à <strong>sauvegarder</strong> ton travail, c'est <em>vraiment</em> important.</p>
  • <strong> marque un mot important (affiché en gras par défaut) ;
  • <em> marque une insistance (affichée en italique par défaut).

Les listes

Une liste à puces s'écrit avec <ul> (unordered list), une liste numérotée avec <ol> (ordered list). Dans les deux cas, chaque élément est dans un <li> (list item).

<h2>Ma valise</h2>
<ul>
  <li>Passeport</li>
  <li>Chargeur</li>
  <li>Casque audio</li>
</ul>

<h2>Avant le décollage</h2>
<ol>
  <li>Attacher sa ceinture</li>
  <li>Mettre le téléphone en mode avion</li>
</ol>

Astuce : un <li> ne peut pas être seul, il est toujours dans un <ul> ou un <ol>.

À toi de jouer

Écris la fiche d'une recette de ton choix :

  • le nom de la recette dans un <h1> ;
  • un <h2> « Ingrédients » suivi d'une liste à puces d'au moins 3 éléments ;
  • un <h2> « Étapes » suivi d'une liste numérotée d'au moins 2 éléments ;
  • au moins un mot important en <strong>.
index.html
Résultat
  • La recette a un nom dans <h1>
  • Il y a au moins 2 titres <h2>
  • Une liste à puces <ul> contient au moins 3 <li>
  • Une liste numérotée <ol> contient au moins 2 <li>
  • Au moins un mot est mis en valeur avec <strong>
Bloqué ? Voir une solution 
<h1>Crêpes</h1>

<h2>Ingrédients</h2>
<ul>
  <li>250 g de farine</li>
  <li>4 œufs</li>
  <li>50 cl de lait</li>
</ul>

<h2>Étapes</h2>
<ol>
  <li>Mélanger la farine et les œufs.</li>
  <li>Ajouter le lait <strong>petit à petit</strong>.</li>
</ol>

Quiz

1Combien de <h1> une page devrait-elle avoir ?
2Quelle balise pour une liste numérotée ?
3Tu veux un texte plus gros mais ce n'est pas un titre. Que fais-tu ?