Paragraphes HTML

Dernière mise à jour : 03/02/2022

Dans ce tutoriel, vous apprendrez à créer des paragraphes en HTML.

Créer des paragraphes

L'élément de paragraphe est utilisé pour publier du texte sur les pages Web.

Les paragraphes sont définis avec la balise . La balise de paragraphe est une balise très basique et généralement la première dont vous aurez besoin pour publier votre texte sur les pages Web. Voici un exemple :

<p>Voilà un paragraphe</p>
<p>Et voici un autre paragraphe</p>

Les feuilles de style intégrées aux navigateurs créent automatiquement un espace au-dessus et en dessous du contenu d'un paragraphe (appelé margin ), mais vous pouvez le remplacer à l'aide de CSS.

Fermeture d'une balise paragraphe

Dans HTML 4 et les versions antérieures, il suffisait d'initier un nouveau paragraphe à l'aide de la balise d'ouverture. La plupart des navigateurs afficheront correctement le HTML même si vous oubliez la balise de fermeture. Par example:

<p>This is a paragraph.
<p>This is another paragraph.

Le code HTML de l'exemple ci-dessus fonctionnera dans la plupart des navigateurs Web, mais ne vous y fiez pas. L'oubli de la balise de fermeture peut produire des résultats inattendus ou des erreurs.

Pour des raisons de compatibilité ascendante et de bonnes pratiques de codage, il est conseillé d'utiliser à la fois les balises d'ouverture et de fermeture pour les paragraphes.

Création de sauts de ligne

La balise   est utilisée pour insérer un saut de ligne sur la page Web.

Puisque le est un élément vide, il n'y a donc pas besoin de balise correspondante.

<p>Ceci est un paragraphe <br> avec un saut de ligne.</p>
<p>voilà un<br>autre paragraphe <br> avec des sauts de ligne.</p>

N'utilisez pas le paragraphe vide, c'est-à-dire pour ajouter de l'espace supplémentaire dans vos pages Web. Le navigateur peut ignorer les paragraphes vides puisqu'il s'agit d'une balise logique. Utilisez plutôt la propriété CSS margin pour ajuster l'espace autour des éléments.

Création de lignes horizontales

Vous pouvez utiliser la balise <hr> pour créer des lignes horizontales ou des lignes pour séparer visuellement les sections de contenu sur une page Web. Comme , la balise <hr> est également un élément vide. Voici un exemple :

Voilà un paragraphe

<hr>

Voilà un autre paragraphe.

Gestion des espaces vides

Normalement, le navigateur affichera les multiples espaces créés à l'intérieur du code HTML en appuyant sur la barre d'espace ou la touche de tabulation du clavier comme un seul espace. Plusieurs sauts de ligne créés dans le code HTML en appuyant sur la touche Entrée sont également affichés sous la forme d'un seul espace.

Les paragraphes suivants seront affichés sur une seule ligne sans aucun espace supplémentaire :

<p>Ce paragraphe contient     plusieurs espaces     dans     le code sourse.</p>

<p>

   Ce paragraphe
   contient multiple tabs and sauts de line
    dans les codes.

</p>

Ajouter   pour créer des espaces consécutifs supplémentaires, tandis que ajouter pour créer des sauts de ligne sur vos pages Web, comme illustré dans l'exemple suivant :

<p>ce paragraphe contient plusieurs&nbsp;&nbsp;&nbsp;espaces.</p>
<p>ce paragraphe contient plusieurs<br><br>sauts<br><br><br>de ligne.</p>

Définition du texte préformaté

Parfois, utiliser  , , etc. pour gérer les espaces n'est pas très pratique. Alternativement, vous pouvez utiliser la balise <pre> pour afficher les espaces, les tabulations, les sauts de ligne, etc. exactement tels qu'ils sont écrits dans le fichier HTML. Il est très utile pour présenter du texte où les espaces et les sauts de ligne sont importants comme un poème ou un code.

L'exemple suivant affichera le texte dans le navigateur tel qu'il est dans le code source :

<pre>

   Twinkle, twinkle, little star,
   How I wonder what you are!
   Up above the world so high,
    Like a diamond in the sky.

</pre>

Le texte de l'élément<pre> est généralement rendu par les navigateurs dans une police à espacement fixe ou à largeur fixe, telle que Courier, mais vous pouvez remplacer cela à l'aide de la propriété CSS font.

Les titres en HTML Comment créer des liens en HTML

Suivez nous

Table de matières

Les bases

HTML Avancé

Fonctionnalités HTML5

Table de matière