Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
<p> : l'élément paragraphe
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'élémentHTML<p> représente un paragraphe. Les paragraphes sont généralement représentés dans les médias visuels comme des blocs de texte séparés des blocs adjacents par des lignes vides et/ou une indentation de première ligne, mais les paragraphes HTML peuvent être tout regroupement structurel de contenu lié, comme des images ou des champs de formulaire.
Les paragraphes sont deséléments de niveau bloc et, notamment, se ferment automatiquement si un autre élément de niveau bloc est analysé avant la balise de fermeture</p>. Voir « Omission de balises » ci-dessous.
Exemple interactif
<p> Les geckos sont un groupe de lézards généralement petits et nocturnes. On les trouve sur tous les continents sauf l'Antarctique.</p><p> Certaines espèces vivent dans les maisons où elles chassent les insectes attirés par la lumière artificielle.</p>p { margin: 10px 0; padding: 5px; border: 1px solid #999;}Attributs
Cet élément inclutles attributs universels.
Note :L'attributalign pour les balises<p> est obsolète et ne doit plus être utilisé.
Accessibilité
Répartir le contenu entre différents paragraphes permet d'améliorer l'accessibilité d'une page. Les lecteurs d'écran et autres outils d'assistance fournissent des raccourcis qui permettent aux utilisateur·ice·s d'accéder rapidement au paragraphe suivant ou précédent et ainsi de naviguer plus rapidement sur la page, comme le permettent les blancs pour la navigation visuelle des autres utilisateur·ice·s.
L'utilisation de paragraphes vides (des éléments HTML<p> sans contenu) est problématique pour les personnes qui naviguent sur une page à l'aide d'outils d'assistance. Les lecteurs d'écran, par exemple, pourraient annoncer l'élément mais pas le contenu associé ce qui peut être frustrant ou source de confusion.
S'il est nécessaire d'avoir un espace supplémentaire, on pourra utiliser des propriétésCSS commemargin pour obtenir l'effet désiré.
p { margin-bottom: 2em; // on ajoute un espace après chaque paragraphe}Exemples
HTML
<p> Premier paragraphe du texte. J'aime les licornes beaucoup beaucoup beaucoup.</p><p> Deuxième paragraphe du texte. Et si j'en avais une apprivoisée je serais très contente.</p>Résultat
Mise en forme des paragraphes
Par défaut, les navigateurs séparent les paragraphes par une seule ligne vide. D'autres méthodes de séparation, comme l'indentation de la première ligne, peuvent être obtenues avecCSS :
HTML
<p> Séparer les paragraphes par des lignes vides est le plus facile à parcourir pour les lecteurs·rices, mais ils peuvent aussi être séparés en indentant leur première ligne. Cela est souvent utilisé pour prendre moins de place, par exemple pour économiser du papier à l'impression.</p><p> Les écrits destinés à être modifiés, comme les devoirs scolaires et les brouillons, utilisent à la fois des lignes vides et l'indentation pour séparer les paragraphes. Dans les œuvres achevées, combiner les deux est considéré comme redondant et peu professionnel.</p><p> Dans les écrits très anciens, les paragraphes étaient séparés par un caractère spécial : ¶, le <i>pied-de-mouche</i>. Aujourd'hui, cela est considéré comme oppressant et difficile à lire.</p><p> À quel point est-ce difficile à lire ? Voyez par vous-même : <button data-toggle-text="Oh non ! Revenir en arrière !"> Utiliser le pied-de-mouche pour les paragraphes </button></p>CSS
p { margin: 0; text-indent: 3ch;}p.pilcrow { text-indent: 0; display: inline;}p.pilcrow + p.pilcrow::before { content: " ¶ ";}JavaScript
document.querySelector("button").addEventListener("click", (event) => { document.querySelectorAll("p").forEach((paragraph) => { paragraph.classList.toggle("pilcrow"); }); [event.target.innerText, event.target.dataset.toggleText] = [ event.target.dataset.toggleText, event.target.innerText, ];});Résultat
Résumé technique
| Catégories de contenu | Contenu de flux, contenu tangible. |
|---|---|
| Contenu autorisé | Contenu phrasé. |
| Omission de balises | La balise de début est obligatoire. La balise de fin peut être omise si l'élément<p> est immédiatement suivi d'un<address>,<article>,<aside>,<blockquote>,<details>,<div>,<dl>,<fieldset>,<figcaption>,<figure>,<footer>,<form>,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<header>,<hgroup>,<hr>,<main>,<menu>,<nav>,<ol>,<pre>,<search>,<section>,<table>,<ul> ou d'un autre élément<p>, ou s'il n'y a plus de contenu dans l'élément parent et que l'élément parent n'est pas un élément<a>,<audio>,<del>,<ins>,<map>,<noscript> ou<video>, ou un élément personnalisé autonome. |
| Parents autorisés | Tout élément qui accepte ducontenu de flux. |
| Rôle ARIA implicite | paragraphe |
| Rôles ARIA autorisés | Tous |
| Interface DOM | HTMLParagraphElement |
Spécifications
| Specification |
|---|
| HTML # the-p-element |