Quand utiliser plutôt que ?

Utilisez quand le retour à la ligne fait partie du contenu lui-même, comme dans une adresse ou un poème. Utilisez des éléments distincts pour des paragraphes distincts, et la marge CSS pour l'espacement, plutôt que d'empiler des balises .

Docs HTML exécutables : Retour à la ligne

Q: Comment faire un retour à la ligne en HTML ?

Insérez là où la nouvelle ligne doit commencer : Line one Line two. Appuyer sur Entrée dans votre fichier HTML ne marche pas, car les navigateurs traitent les sauts de ligne du code source comme de simples espaces.

Q: Comment garder les sauts de ligne d'un texte sans ajouter de balises ?

Donnez à l'élément white-space: pre-line en CSS. Le navigateur affiche alors chaque saut de ligne du texte comme un retour à la ligne, tout en réduisant les espaces en trop. C'est pratique pour les commentaires d'utilisateurs et le texte chargé en JavaScript.

Q: Comment empêcher un retour à la ligne en HTML ?

Entourez le texte d'un élément avec white-space: nowrap, ou reliez deux mots par une espace insécable pour qu'ils restent toujours sur la même ligne.

Retour à la ligne en HTML : la balise br et les coupures

Utilisez pour commencer une nouvelle ligne dans un bloc de texte. Découvrez quand convient et quand un paragraphe vaut mieux, comment conserver les sauts de ligne d'un texte, comment laisser les mots longs se couper avec et comment empêcher une ligne de se couper.

Cette page contient des éditeurs exécutables - modifiez, exécutez et voyez la sortie instantanément.

Par Kevin Spektor, Co-founder & CTO

Publié le Sep 24, 2026

Comment faire un retour à la ligne

Placez   là où la nouvelle ligne doit commencer. C'est un élément vide, il n'a donc pas de balise fermante :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line break</title>
</head>
<body>
  <p>
    Coddy Ltd.<br>
    12 Market Street<br>
    Springfield
  </p>
  <p>Pressing Enter in the source
     does not break the line.</p>
</body>
</html>

L'adresse se coupe exactement à chaque  . Le second paragraphe reste sur une seule ligne alors que le code source contient un saut de ligne : HTML traite les sauts de ligne, les tabulations et les suites d'espaces comme une seule espace. C'est pour cela que   existe.

 ,   et   produisent tous le même élément. Utilisez celui de votre projet (JSX et XHTML exigent la barre oblique).

br ou p : un retour à la ligne n'est pas un espacement

Un   termine une ligne à l'intérieur du même paragraphe. Un nouveau  commence un nouveau paragraphe, avec de l'espace au-dessus et en dessous grâce aux marges par défaut. Empiler des   pour créer de l'espace fonctionne, mais c'est fragile et cela dit la mauvaise chose :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>br vs p</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { border: 2px solid #e5e7eb; padding: 0 12px; margin-bottom: 12px; }
    .spaced p { margin: 0 0 24px; }
  </style>
</head>
<body>
  <div class="box">
    <p>With br tags:<br><br><br>Second paragraph?</p>
  </div>
  <div class="box spaced">
    <p>With two paragraphs and CSS margin:</p>
    <p>Second paragraph.</p>
  </div>
</body>
</html>

Les deux boîtes se ressemblent, mais pour un lecteur d'écran la première est un seul paragraphe, et changer l'espacement oblige à modifier chaque page. Dans la seconde, l'écart tient en une ligne de CSS.

Les bons usages de   : les adresses, les poèmes et paroles de chansons, et les lignes d'une signature, là où le retour à la ligne appartient au texte. Pour tout le reste, utilisez des paragraphes, des listes ou des titres.

Conserver les sauts de ligne de votre texte

Quand un texte vient d'ailleurs (un champ de commentaire, une base de données, un script), il contient de vrais caractères de saut de ligne au lieu de balises  . La propriété CSS white-space: pre-line fait afficher ces sauts de ligne comme des retours à la ligne :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pre-line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .msg { border: 2px solid #e5e7eb; padding: 8px 12px; margin-bottom: 8px; }
    .keep { white-space: pre-line; border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="msg" id="a"></div>
  <div class="msg keep" id="b"></div>
  <script>
    const text = 'Hi team,\nThe build is fixed.\nThanks!';
    document.getElementById('a').textContent = text;
    document.getElementById('b').textContent = text;
  </script>
</body>
</html>

La même chaîne s'affiche sur une ligne dans la boîte grise et sur trois lignes dans la bleue. C'est aussi plus sûr que d'insérer des balises   dans un texte utilisateur avec innerHTML, ce qui permettrait aux utilisateurs d'injecter du HTML. Pour garder aussi les espaces et l'indentation, utilisez white-space: pre, présenté sur la page espace en HTML.

Laisser les mots longs se couper : wbr

Un mot long ou une URL sans espaces peut déborder d'une boîte étroite.  marque un endroit où le navigateur peut couper la ligne s'il en a besoin, et ne fait rien sinon :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wbr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 160px; border: 2px solid #f59e0b; padding: 4px; margin-bottom: 12px; }
  </style>
</head>
<body>
  <div class="narrow">example.com/docs/html/line-break-tag</div>
  <div class="narrow">example.com/<wbr>docs/<wbr>html/<wbr>line-break-tag</div>
</body>
</html>

Le premier chemin sort de sa boîte ; le second se coupe aux points . Pour un texte que vous ne maîtrisez pas, la propriété CSS overflow-wrap: anywhere coupe plutôt les mots longs n'importe où.

Empêcher une ligne de se couper

Parfois vous voulez l'inverse : garder « 10 km » ou un numéro de téléphone ensemble. Deux outils :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No break</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 170px; border: 2px solid #16a34a; padding: 4px; }
    .nowrap { white-space: nowrap; }
  </style>
</head>
<body>
  <p class="narrow">The race is exactly 10&nbsp;km long, call <span class="nowrap">+1 555 0100</span> to join.</p>
</body>
</html>

  est une espace où le navigateur ne coupera pas la ligne, donc « 10 » et « km » restent ensemble. white-space: nowrap garde tout un span sur une seule ligne. Remplacez   par une espace normale, ou retirez la classe, et à cette largeur les deux se coupent sur deux lignes.

Erreurs fréquentes

Appuyer sur Entrée dans le code source en attendant une nouvelle ligne. En HTML, les sauts de ligne sont des espaces. Utilisez  , des éléments séparés ou white-space: pre-line.
Empiler   pour espacer. Utilisez des paragraphes et margin.
Utiliser   pour construire une liste. Utilisez <ul> ou <ol> avec <li>, que les lecteurs d'écran annoncent comme une liste.
Écrire . Ce n'est pas valide. Écrivez  .
Ajouter des   à un texte utilisateur avec innerHTML. Définissez textContent et utilisez plutôt white-space: pre-line.

Questions fréquentes

Comment faire un retour à la ligne en HTML ?

Insérez   là où la nouvelle ligne doit commencer : Line one Line two. Appuyer sur Entrée dans votre fichier HTML ne marche pas, car les navigateurs traitent les sauts de ligne du code source comme de simples espaces.

Faut-il écrire , ou ?

Les trois fonctionnent en HTML et produisent le même élément.   est la forme HTML simple ; les versions avec barre oblique sont acceptées pour la compatibilité avec XHTML et JSX.  seul est invalide, même si les navigateurs le lisent comme un retour à la ligne de plus.

Quand utiliser plutôt que ?

Utilisez   quand le retour à la ligne fait partie du contenu lui-même, comme dans une adresse ou un poème. Utilisez des éléments  distincts pour des paragraphes distincts, et la marge CSS pour l'espacement, plutôt que d'empiler des balises  .

Comment garder les sauts de ligne d'un texte sans ajouter de balises ?

Donnez à l'élément white-space: pre-line en CSS. Le navigateur affiche alors chaque saut de ligne du texte comme un retour à la ligne, tout en réduisant les espaces en trop. C'est pratique pour les commentaires d'utilisateurs et le texte chargé en JavaScript.

Comment empêcher un retour à la ligne en HTML ?

Entourez le texte d'un élément avec white-space: nowrap, ou reliez deux mots par une espace insécable   pour qu'ils restent toujours sur la même ligne.

Concepts liés