Balise HTML <p>
La balise <p> définit un paragraphe de texte. Description, attributs et exemples d'utilisation de la balise.
La balise HTML <p> est un élément de niveau bloc qui définit un paragraphe de texte sur une page web. En tant qu'élément de niveau bloc, elle commence sur une nouvelle ligne et occupe toute la largeur de son conteneur parent.
Cette page explique comment écrire des paragraphes, l'espacement par défaut que les navigateurs leur appliquent, les cas où vous ne devriez pas utiliser <p>, et comment styliser les paragraphes avec CSS.
Cette balise sémantique est couramment utilisée pour structurer du contenu textuel, comme des articles, des billets de blog ou des descriptions de produits. Vous pouvez placer des balises en ligne telles que <strong> ou <em> à l'intérieur d'un <p> pour mettre en évidence ou formater des mots ou des expressions spécifiques dans le paragraphe.
Structurer correctement votre contenu textuel avec la balise <p> est important pour l'accessibilité et l'utilisabilité. Les lecteurs d'écran et autres technologies d'assistance s'appuient sur des balises sémantiques comme <p> pour interpréter et présenter avec précision le contenu aux utilisateurs.
Syntaxe
La balise <p> vient par paires. Le contenu est écrit entre les balises ouvrante (<p>) et fermante (</p>). Si la balise fermante est omise, il est considéré que la fin du paragraphe coïncide avec le début du prochain élément de niveau bloc.
Les espaces entre la balise ouvrante <p> et son contenu sont ignorés par le navigateur. Pour définir un retrait, utilisez la propriété CSS text-indent .
La balise <p> ne peut pas contenir de tableaux ni d'autres éléments de niveau bloc.
Exemple de la balise HTML <p> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>Espacement par défaut des paragraphes (le modèle de boîte)
Les navigateurs n'affichent pas les paragraphes collés les uns aux autres. Par défaut, ils appliquent une marge haute et basse d'environ 1em à chaque élément <p>, ce qui crée l'écart visible entre les paragraphes. Le style user-agent par défaut est approximativement :
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
}C'est pourquoi deux paragraphes adjacents sont espacés même si vous n'écrivez aucun CSS. Si vous souhaitez que les paragraphes soient plus proches (ou supprimer complètement l'écart), réinitialisez vous-même la marge :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin-top: 0;
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<p>This paragraph has a smaller gap below it.</p>
<p>And this one sits closer to the paragraph above.</p>
</body>
</html>Une réinitialisation courante consiste à appliquer margin: 0 sur p, puis à rajouter l'espacement uniquement avec margin-bottom. Cela évite que le premier paragraphe ne repousse son conteneur vers le bas avec une marge haute indésirable.
Quand NE PAS utiliser <p>
Un élément <p> ne peut contenir que du contenu phrasé — du texte et des éléments en ligne tels que <strong>, <em>, <a>, <span> ou <img>. Il ne peut pas contenir d'éléments de niveau bloc.
Si vous imbriquez un élément de niveau bloc à l'intérieur d'un <p>, le navigateur ferme automatiquement le paragraphe avant cet élément, sans avertissement. C'est l'une des erreurs de débutant les plus courantes, car la page s'affiche quand même mais le DOM n'est pas ce que vous avez écrit. Évitez de placer ces éléments dans un <p> :
<div>(utilisez la balise<div>comme conteneur autour des paragraphes à la place)- Les listes telles que
<ul>,<ol>,<li> - Les titres (
<h1>–<h6>) - Les tableaux (
<table>) - Un autre
<p>(les paragraphes ne peuvent pas être imbriqués)
<!-- WRONG: the <p> is auto-closed before the <div>,
so the second sentence ends up outside the paragraph -->
<p>
First sentence.
<div>Block content</div>
Second sentence.
</p>Pour regrouper du contenu de niveau bloc, enveloppez vos paragraphes dans un <div> plutôt que l'inverse. Pour regrouper du contenu en ligne, utilisez la balise <span>.
Utilisation avec CSS
Pour aligner le texte dans un paragraphe, plutôt que d'utiliser l'attribut obsolète align, utilisez la propriété CSS text-align.
Exemple de la balise HTML <p> utilisée avec la propriété CSS text-align :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.paragraph {
text-align: center;
}
</style>
</head>
<body>
<h1>Title of the document</h1>
<div class="paragraph">
<p>The text alignment to the center is set with CSS property text-align</p>
</div>
</body>
</html>Sauts de ligne dans un paragraphe
Pour passer à la ligne à l'intérieur d'un paragraphe sans en commencer un nouveau, utilisez la balise <br>. Contrairement à un nouveau <p>, un <br> n'ajoute pas la marge par défaut des paragraphes — il déplace simplement le texte suivant à la ligne suivante.
Exemple de la balise HTML <p> utilisée avec la balise <br> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> Inside the paragraph, we can put the tag <br />, <br /> to transfer a part of the text to another line if necessary.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. <br /> The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| align | left, right, center, justify | Définit l'alignement du texte. Déprécié — non pris en charge en HTML5 ; utilisez la propriété CSS text-align à la place |
La balise <p> prend également en charge les attributs globaux et les attributs d'événement.
Comment styliser une balise HTML <p>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: blue;
font-size: 18px;
text-align: justify;
}
</style>
</head>
<body>
<p>This paragraph is styled with CSS.</p>
</body>
</html>