HTML · Leçon 2

Titres & textes

Structurer un texte comme un article : des titres hiérarchisés, des paragraphes, et quelques mots mis en valeur.

Six niveaux de titres

De <h1> (le plus important) à <h6>. Pense « plan de dissertation », pas « taille du texte ».

Règle d'or Un seul h1 par page, et on ne saute pas de niveau (pas de h4 directement après un h2). La taille, on la change avec le CSS.

Mettre en valeur

BaliseSens
<strong>Important (affiché en gras)
<em>Accentué, insistance (affiché en italique)
<mark>Surligné
<blockquote>Citation longue
<code>Bout de code
<hr>Séparation thématique (trait)

Les espaces ne comptent pas

Le HTML fusionne les espaces et retours à la ligne. Essaie d'ajouter des espaces ou des lignes vides :

Tu veux écrire deux paragraphes distincts. Que fais-tu ?

  1. J'appuie deux fois sur Entrée dans mon code
  2. J'utilise plusieurs <br>
  3. J'utilise deux balises <p>

Chaque paragraphe a sa propre balise <p>. <br> sert seulement pour un retour à la ligne à l'intérieur d'un texte (adresse, poème…).

À toi de jouer

La fiche recette

Transforme ce texte brut en page bien structurée :

  • « Crêpes » en titre principal h1
  • « Ingrédients » et « Préparation » en h2
  • Chaque bloc de texte dans un p
  • « 20 minutes » en strong, « très chaude » en em
IndiceRepère d’abord les 3 lignes courtes qui sont des titres : « Crêpes », « Ingrédients », « Préparation ». Tout le reste, ce sont des paragraphes.
IndicePour mettre en valeur quelques mots, entoure seulement ces mots : Prêtes en <strong>20 minutes</strong>, pour 4 personnes.
IndiceLe début de la solution :
<h1>Crêpes</h1>
<p>Prêtes en <strong>20 minutes</strong>, pour 4 personnes.</p>

<h2>Ingrédients</h2>
<p>...</p>

Remets le plan en ordre

Tout est en h1 : c'est faux ! Voici le plan voulu :

Mon blog            ← titre de niveau 1 (le titre de la page)
  Voyages           ← titre de niveau 2
    Italie          ← titre de niveau 3
    Espagne         ← titre de niveau 3
  Cuisine           ← titre de niveau 2

Les paragraphes <p> ne changent pas : seules les balises de titre sont à corriger.

IndiceSeul « Mon blog » reste en h1 : c’est le titre de la page.
Indice« Voyages » et « Cuisine » sont au même niveau : titres de niveau 2 (h2). « Italie » et « Espagne » sont rangés dans « Voyages » : un niveau en dessous (h3).
IndiceChange le nom de la balise ouvrante et de la fermante :
<h1>Voyages</h1>  →  <h2>Voyages</h2>
<h1>Italie</h1>   →  <h3>Italie</h3>

À retenir