Balise HTML <p>
La balise HTML <p> est un élément de niveau bloc utilisé pour définir un paragraphe de texte sur une page web. Elle crée une nouvelle ligne avant et après l'élément, en occupant toute la largeur de son conteneur parent.
Cette balise sémantique est couramment utilisée pour structurer le contenu textuel d'une page web, comme des articles, des publications de blog ou des descriptions de produits. Vous pouvez ajouter d'autres balises HTML, comme <strong> ou <em>, à l'intérieur de la balise <p> pour mettre en évidence ou formater des mots ou des phrases spécifiques dans le paragraphe.
Structurer correctement votre contenu textuel avec la balise <p> est important, car cela peut aider à améliorer l'accessibilité et l'utilisabilité de votre page web. Les lecteurs d'écran et autres technologies d'assistance s'appuient sur des balises sémantiques comme <p> pour interpréter et présenter précisément le contenu aux utilisateurs.
Syntaxe
La balise <p> s'utilise par paire. Le contenu est écrit entre la balise ouvrante (<p>) et la balise fermante (</p>). Si la balise fermante est omise, on considère que la fin du paragraphe correspond au début du prochain élément de niveau bloc.
TIP
Les espaces entre la balise ouvrante <p> et son contenu sont ignorés par le navigateur. Pour définir une indentation, utilisez la propriété CSS text-indent.
DANGER
La balise <p> ne peut pas contenir de tableaux ni d'autres éléments de niveau bloc.
Exemple de la balise HTML <p> :
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>Résultat
Utilisation du CSS
Pour aligner du texte dans un paragraphe, au lieu 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 :
Balise HTML <p> 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>Exemple de la balise HTML <p> utilisée avec la balise <br> :
Exemple de la balise HTML <p> avec la balise HTML <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 | right left justify | Définit l'alignement du texte. Non pris en charge en HTML5 |
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>Pratique
Quel est l'objectif de la balise HTML <p> ?