Leçon 3 / 12
Leçon 03 · ~15 min · Partie 1 — HTML

Titres et paragraphes

Pourquoi structurer son texte ?

Imagine un livre sans chapitres ni titres. Juste un gros bloc de texte. Impossible à lire. Le web, c'est pareil.

HTML te donne des outils pour organiser ton texte. Des titres pour les grandes idées. Des paragraphes pour les expliquer. Du gras pour les mots importants. Ça aide tes lecteurs — et aussi Google.

Les titres : h1 à h6

HTML propose 6 niveaux de titres. De <h1> (le plus important) à <h6> (le moins important). Le "h" vient de "heading" (titre en anglais).

Pense à un livre : h1 = le titre du livre, h2 = les chapitres, h3 = les sous-chapitres, et ainsi de suite.

HTML 
<!-- Titre principal de la page — le plus grand -->
<h1>Mon blog de cuisine</h1>

<!-- Titre de chapitre / section principale -->
<h2>Les recettes du mois</h2>

<!-- Sous-titre / sous-section -->
<h3>Recettes végétariennes</h3>

<!-- Et ainsi de suite jusqu'à h6... -->
<h4>Entrées</h4>
<h5>Encore plus petit</h5>
<h6>Niveau 6 — rarement utilisé</h6>

En pratique, on utilise surtout h1, h2 et h3. Les niveaux 4, 5 et 6 existent mais servent rarement.

⚠️

Attention ! Il doit y avoir un seul <h1> par page. C'est le titre principal de la page. Un seul sujet principal = un seul h1. Tu peux avoir autant de h2 et h3 que tu veux.

💡

Ne saute pas de niveau. Après un h1, vient un h2. Après un h2, un h3. Pas un h4 directement. Pense à une bonne table des matières : tout est en ordre.

Les paragraphes : <p>

La balise <p> crée un paragraphe. "p" pour "paragraph". C'est la balise que tu utiliseras le plus souvent.

Le navigateur ajoute automatiquement un espace avant et après chaque paragraphe. Pas besoin de t'en occuper.

HTML 
<p>Je suis le premier paragraphe. Il peut être
long et s'étendre sur plusieurs lignes dans ton code.
Le navigateur en fait une seule ligne continue.</p>

<p>Je suis le deuxième paragraphe. Un espace s'affiche
automatiquement entre nous deux.</p>
⚠️

Piège classique ! Les sauts de ligne dans ton code ne créent pas de sauts de ligne sur la page. Tu peux appuyer sur Entrée 10 fois — le navigateur l'ignore. Pour forcer un saut de ligne, utilise <br>. Mais préfère deux paragraphes séparés plutôt qu'en abuser.

Mettre du texte en valeur

HTML a des balises pour donner du sens à certains mots. Important : ces balises ont une signification, pas juste un effet visuel.

<strong> : texte important

Utilise <strong> quand un mot est vraiment important. Les navigateurs l'affichent en gras par défaut. Le vrai sens : "c'est crucial, attention à ça".

<em> : emphase

Utilise <em> (emphasis = insistance) quand tu veux accentuer un mot. Comme si tu le disais plus fort à l'oral. Affiché en italique par défaut.

HTML 
<p>
  Ce médicament est <strong>dangereux en surdose</strong>.
  Ne jamais dépasser <em>deux comprimés par jour</em>.
</p>

<!-- Autres balises utiles -->
<p>
  Texte <mark>surligné en jaune</mark> pour attirer l'attention.
  Du <small>texte plus petit</small> pour les notes de bas de page.
  Exposant : E = mc<sup>2</sup>.
  Indice chimique : H<sub>2</sub>O.
</p>
💡

Pourquoi pas juste du CSS pour mettre en gras ? Tu pourrais. Mais <strong> dit aussi aux lecteurs d'écran que ce texte est important. Une personne malvoyante entend cette emphase. Le sens compte autant que l'apparence.

Le saut de ligne : <br>

La balise <br> (break = coupure) force un saut de ligne. C'est une balise sans fermeture.

Utilise-la peu. Elle est utile pour les adresses ou les poèmes — quand tu veux couper une ligne sans créer un nouveau paragraphe.

HTML 
<p>
  Marie Dupont<br>
  12 rue des Fleurs<br>
  75001 Paris
</p>

La citation : <blockquote>

Pour citer quelqu'un, utilise <blockquote>. Le navigateur l'indente pour la distinguer du reste. Les lecteurs d'écran la reconnaissent aussi.

HTML 
<blockquote>
  <p>Le Web est pour tout le monde.</p>
  <footer>— Tim Berners-Lee, inventeur du Web</footer>
</blockquote>

La ligne de séparation : <hr>

La balise <hr> trace une ligne horizontale. Elle marque un changement de sujet. Pas de contenu, pas de balise fermante.

HTML 
<p>Fin du chapitre 1.</p>

<!-- Une ligne de séparation -->
<hr>

<p>Début du chapitre 2.</p>
// à toi de jouer

Structure un texte

Objectif : crée une petite page avec un h1, deux h2, des paragraphes et du texte en gras ou en italique. Essaie aussi <mark> pour surligner un mot important.

Éditeur live
HTML
Résultat
// à retenir
  • h1 à h6 pour les titres. Un seul h1 par page. Ne saute pas de niveau.
  • <p> pour chaque paragraphe. Le navigateur ajoute l'espacement automatiquement.
  • <strong> = texte important (gras par défaut). <em> = emphase (italique par défaut).
  • Les retours à la ligne dans ton code n'ont aucun effet sur la page. Utilise <br> si nécessaire.
  • <mark> surligne. <small> réduit la taille. <sup> exposant. <sub> indice.
  • <blockquote> pour les citations. <hr> pour une ligne de séparation.