HTML br : sauts de ligne et différences avec p, wbr et pre

HTML <br> insère un saut de ligne à un point spécifique dans le texte. Utilisez-le lorsque la division de la ligne elle-même est importante, comme dans la poésie ou une adresse postale. Séparez les paragraphes distincts avec p et contrôlez l'espacement avec CSS.

Syntaxe de br et sauts de ligne dans le code source

br est un élément vide sans contenu ni balise de fermeture. Écrivez <br> en HTML, sans </br>. HTML accepte également <br />, mais la barre oblique n'est pas ce qui provoque le saut de ligne.

Avec les styles par défaut ordinaires, les sauts de ligne et les espaces consécutifs dans la source sont fusionnés. Un br spécifie un saut à l'intérieur du contenu indépendamment du formatage de la source. Cela est également différent du retour automatique à la ligne du texte lorsque l'écran devient plus étroit.

Exemple complet : comparez les sauts de ligne dans la source, br et les paragraphes

Enregistrez le document suivant en tant que line-breaks.html et ouvrez-le dans un navigateur. Il présente le même texte court avec différentes structures afin que vous puissiez comparer les résultats.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparer les sauts de ligne et les paragraphes</title>
  <style>
    body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
    .message { margin: 0; line-height: 1.6; }
    .message + .message { margin-top: 1rem; }
  </style>
</head>
<body>
  <h1>Comparer les sauts de ligne</h1>
  <h2>Saut de ligne uniquement dans le code source</h2>
  <p id="source-only">Première ligne
    Deuxième ligne</p>
  <h2>Saut de ligne avec br</h2>
  <p id="with-br">Première ligne<br>Deuxième ligne</p>
  <h2>Paragraphes distincts</h2>
  <p class="message">Un paragraphe sur le premier sujet.</p>
  <p class="message">Un paragraphe sur le deuxième sujet.</p>
</body>
</html>

La première section se lit comme Première ligne Deuxième ligne ; la seconde se sépare après br. Les deux dernières phrases sont des paragraphes séparés avec un écart CSS de 1rem. Une fenêtre très étroite peut également faire que la première section se replie, mais ce n'est pas une rupture spécifiée par br.

Choisissez entre br, p, wbr et pre

Insérer br après chaque phrase pour obtenir une longueur visuellement agréable peut produire un retour à la ligne maladroit sur les petits écrans ou avec une grande taille de caractères. Laissez la prose normale se couper naturellement. Si vous devez conserver les espaces et les divisions de lignes créés par l'auteur, consultez le guide guide HTML pre sur les espaces et les sauts de ligne.

Utilisez le CSS pour l'espace blanc et l'espacement des paragraphes

L'utilisation répétée des éléments br pour créer un espace vide peut fusionner sémantiquement des paragraphes distincts en un seul et rendre la navigation des paragraphes par lecteur d'écran plus difficile. Utilisez p pour un nouveau paragraphe et margin pour l'espacement. Contrôlez la hauteur des lignes au sein d'un paragraphe avec line-height.

N'utilisez pas l'attribut obsolète clear ni les marges sur br lui-même comme outils de mise en page. Gérez séparément les divisions de lignes significatives par rapport à la mise en page visuelle afin que le texte reste lisible sur toutes les largeurs d'écran et tailles de police. La référence référence MDN de br explique la syntaxe et l'accessibilité.