<p> : l'élément paragraphe

<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; } 

p { margin-bottom: 2em; // on ajoute un espace après chaque paragraphe } 

<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> 

<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&nbsp;: ¶, 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&nbsp;? Voyez par vous-même&nbsp;: <button data-toggle-text="Oh non&nbsp;! Revenir en arrière&nbsp;!"> Utiliser le pied-de-mouche pour les paragraphes </button> </p> 

p { margin: 0; text-indent: 3ch; } p.pilcrow { text-indent: 0; display: inline; } p.pilcrow + p.pilcrow::before { content: " ¶ "; } 

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, ]; });