🎯 Accroche
« Tu veux écrire un texte propre sur une page web ? Sans la balise <p>, tous tes mots se collent les uns aux autres… »
Regardez la différence ci-dessous :
Sans <p> :
Ceci est une ligne. Ceci est une autre ligne.
Avec <p> :
Ceci est une ligne. Ceci est une autre ligne.
Avec <p> :
Ceci est un paragraphe.
Ceci est un autre paragraphe (avec de l’espace automatique).
📖 À quoi sert <p> ?
La balise <p> (paragraphe) est utilisée pour structurer un bloc de texte. Elle crée une séparation verticale (marge) avant et après le contenu, rendant la lecture plus agréable.
- Balise ouvrante :
<p> - Balise fermante :
</p> - Entre les deux, on écrit le texte du paragraphe.
<p> Votre texte ici </p>
🧪 Exemple en direct
Voici un paragraphe généré par le code ci-dessous. Essayez de modifier le texte dans l’éditeur :
👆 Cliquez sur le paragraphe pour changer son texte. Cela montre que la balise <p> est interactive (on peut la manipuler avec JavaScript).
🔑 Points clés
<p>est une balise bloc : elle occupe toute la largeur disponible.- Deux paragraphes consécutifs sont séparés par une marge verticale.
- On ne peut pas mettre un autre élément bloc (comme une
<div>) à l’intérieur d’un<p>(invalide en HTML).
✏️ Mini‑exercice
Complétez le code ci-dessous pour créer trois paragraphes :
<body>
<h1>Mes paragraphes</h1>
<!-- Ajoute 3 balises <p>...</p> ici -->
</body>
Par exemple : le premier paragraphe dit « Bienvenue », le deuxième « À la capsule HTML », le troisième « Continuez comme ça ! ».
✔️ Fin de la capsule. N’hésitez pas à refaire l’exercice pour bien mémoriser.