Paragraphes HTML

Vous utilisez déjà les titres pour les intitulés et les sections. La majeure partie du texte lisible du corps d’une page appartient aux paragraphes. Cette leçon se concentre sur l’élément p — comment l’écrire, comment le navigateur l’affiche, et en quoi il diffère des lignes vides dans l’éditeur.

Qu’est-ce qu’un paragraphe HTML ?

Un paragraphe HTML est un bloc de texte marqué avec l’élément p. Vous ouvrez avec <p>, écrivez le texte, et fermez avec </p>. Les paragraphes servent aux phrases ordinaires et aux courts blocs de contenu du corps, pas aux titres de page (ceux-ci utilisent les titres heading).

Réponse directe

Enveloppez chaque bloc de texte du corps dans ses propres balises p. Le navigateur traite chaque p comme un paragraphe et ajoute généralement de l’espace avant et après. Appuyer plusieurs fois sur Entrée dans votre fichier HTML ne crée pas le même espacement — le navigateur compacte les espaces blancs supplémentaires dans la source sauf si vous utilisez les bons éléments.

Lire l’exemple

• Le premier <p>…</p> est un paragraphe
• Le second <p>…</p> en est un autre
• Le navigateur les affiche comme des blocs séparés, souvent avec un espace entre eux
• Le texte entre les balises est le contenu que les lecteurs voient

L’espace blanc dans la source n’est pas une mise en page

Dans l’éditeur, vous pouvez appuyer sur Entrée pour rendre le fichier HTML plus lisible. Cela ne signifie pas que le navigateur affichera ces lignes vides comme de grands vides. Pour de vrais sauts de paragraphe, utilisez des éléments p séparés. Pour un saut de ligne dans la même idée — comme une courte adresse ou un vers — vous pouvez utiliser <br> (vu brièvement avec les éléments).

Préférez les paragraphes aux astuces d’espace vide

Ne empilez pas de balises vides <p></p> juste pour pousser le contenu vers le bas. Ne mettez pas tout un article dans un paragraphe géant s’il s’agit de plusieurs idées. Divisez les idées en blocs p clairs. Plus tard, CSS contrôlera l’espacement et les polices ; HTML doit marquer la vraie structure du texte.

Essayez vous-même

1. Ouvrez votre squelette HTML de base
2. Ajoutez un h1 et deux courts paragraphes en dessous
3. Ajoutez un troisième paragraphe qui utilise <br> pour une courte adresse multiligne
4. Enregistrez et ouvrez la page dans le navigateur
5. Comparez ce que vous voyez avec les lignes vides du fichier source

Erreurs fréquentes

• Compter sur les lignes vides dans la source au lieu de balises p séparées
• Utiliser des titres quand il ne faut que des phrases ordinaires du corps
• Créer des paragraphes vides seulement pour ajouter de l’espace vertical
• Oublier le </p> de fermeture sur un long paragraphe
• Mettre toute une page d’idées sans lien dans un seul p

Résumé

• Le texte du corps appartient en général à l’élément p
• Chaque paragraphe doit être son propre bloc <p>…</p>
• Les navigateurs ajoutent typiquement de l’espace entre les paragraphes
• Les Entrée supplémentaires dans la source ne valent pas l’espacement réel de mise en page
• Utilisez <br> pour un saut de ligne dans un paragraphe si besoin
• Gardez la structure en HTML ; affinez l’espacement plus tard avec CSS