Saut de ligne HTML : <br> pour une ligne, <p> pour un paragraphe
En HTML, la balise <br> insère un saut de ligne à l’endroit choisi. Elle convient à une adresse, des vers ou une signature. Pour séparer des idées et structurer une page, utilisez plutôt les paragraphes et le CSS. Le bon choix améliore la lisibilité, l’accessibilité et l’adaptation du contenu à chaque écran.
Ce que fait réellement la balise <br>
Les retours à la ligne saisis directement dans le code HTML ne sont généralement pas reproduits tels quels par le navigateur. Plusieurs espaces, tabulations et passages à la ligne successifs sont habituellement réduits à un seul espace à l’affichage. Pour obtenir un retour visible, il faut donc utiliser une balise ou appliquer une règle CSS adaptée.
La balise <br> signifie break, c’est-à-dire rupture de ligne. Elle interrompt la ligne en cours sans créer un nouveau bloc de contenu. Elle ne possède pas de balise de fermeture distincte, car elle ne contient aucun texte.
Pour afficher une adresse sur plusieurs lignes, écrivez par exemple : <p>18 rue des Tilleuls<br>69003 Lyon<br>France</p>. Le navigateur place chaque élément sur sa propre ligne, tout en conservant un seul paragraphe logique.
<br> ou <br /> : quelle syntaxe choisir ?
En HTML5, les deux écritures produisent le même rendu : <br> et <br />. La seconde comporte une barre oblique finale. Elle vient de la syntaxe XHTML, dans laquelle les éléments vides devaient être explicitement fermés.
Référence officielle HTML sur l’élément br : Consultez la spécification HTML du WHATWG pour comprendre l’usage et le comportement de l’élément br.
| Syntaxe | Usage | Recommandation |
|---|---|---|
| <br> | HTML moderne et HTML5 | Forme sobre et courante pour une page web classique. |
| <br /> | Documents ou outils imposant une syntaxe XHTML | À conserver si le projet applique cette convention partout. |
Dans une page HTML5, aucune des deux syntaxes n’offre d’avantage visuel ou de compatibilité avec les navigateurs. La balise est disponible sur tous les navigateurs depuis juillet 2015. Choisissez surtout une forme cohérente avec les conventions du projet, notamment lorsqu’un générateur, un CMS ou un validateur impose un format précis.
Évitez toutefois d’écrire </br>. Cette fermeture est incorrecte, car <br> est un élément vide. Le navigateur peut l’ignorer, mais elle dégrade la qualité du code et risque de perturber certains outils de contrôle.
Choisir la bonne structure avant de forcer une ligne
Utilisez <br> pour une rupture qui fait partie du contenu
La balise est adaptée lorsque le retour à la ligne possède un sens éditorial précis. C’est le cas d’une adresse postale, d’une signature, d’un poème, de paroles citées ou d’horaires présentés ligne par ligne. Le lecteur doit alors retrouver cette disposition, quelle que soit la largeur de l’écran.
Un retour de ligne peut aussi servir de repère dans une information courte, par exemple le nom d’une société, le nom d’un service, puis un numéro de téléphone. Son usage doit rester ponctuel. Une succession de <br> destinée à espacer artificiellement des blocs produit un code difficile à maintenir. L’espacement relève de la mise en forme, pas du contenu.
Préférez <p> pour des idées distinctes
Deux paragraphes n’expriment pas la même chose que deux lignes séparées. La balise <p> crée un bloc autonome auquel le navigateur et la feuille de style peuvent appliquer des marges, une hauteur de ligne et un espacement cohérent. Elle convient aux explications, aux descriptions, aux articles et aux textes longs.
Posez-vous une question simple : la phrase suivante développe-t-elle une nouvelle idée ? Si oui, créez un nouveau paragraphe. Si elle prolonge exactement la même information, mais doit apparaître sur la ligne suivante, <br> peut convenir.
L’axe de lecture compte autant que le rendu
Sur un écran large, plusieurs retours forcés peuvent sembler bien alignés. Sur mobile, ils risquent de casser le rythme, de créer des lignes trop courtes et de faire perdre le fil. La largeur de la colonne varie selon l’appareil, le zoom et les préférences de l’utilisateur.
Les paragraphes laissent le texte s’adapter naturellement à cet espace. La balise <br> doit donc rester réservée aux ruptures dont la position conserve un intérêt lorsque la colonne se resserre.
Ne pas confondre saut de ligne, espacement et liste
Empiler deux, trois ou cinq balises <br> pour créer un vide vertical est une erreur fréquente. Le résultat peut varier selon la police, le navigateur et les styles du site. Le code devient surtout difficile à maintenir : une modification graphique oblige alors à rechercher ces balises dans tout le contenu.
Pour séparer des sections, utilisez des paragraphes, des titres et des marges CSS. Pour des éléments de même nature, employez une liste <ul> ou <ol>. Une liste de services, de conditions ou d’étapes reste ainsi identifiable par les technologies d’assistance et plus facile à parcourir.
- <br> : rupture ponctuelle au sein d’un même contenu, par exemple une adresse.
- <p> : paragraphe de texte autonome.
- <ul> ou <ol> : série d’éléments associés ou étapes à suivre.
- CSS : marges, espacement, alignement et comportement responsive.
Dans certains cas, la propriété CSS white-space permet aussi de préserver les retours à la ligne déjà présents dans un texte. Cette solution est utile lorsqu’un contenu saisi par un utilisateur doit conserver une mise en forme simple. Elle concerne la présentation d’un bloc entier, tandis que <br> exprime une rupture directement dans le balisage.
Résoudre les problèmes de retour à la ligne en JavaScript, formulaire et e-mail
Pourquoi \n ne produit pas toujours un saut visible
En JavaScript, le caractère \n représente un retour à la ligne dans une chaîne de texte. Pourtant, si cette chaîne est injectée dans un élément HTML standard, le navigateur peut afficher ce retour comme un espace. Le caractère existe dans les données, mais le mode d’affichage HTML ne le rend pas automatiquement visible.
Pour afficher un texte utilisateur en toute sécurité, conservez-le comme texte puis appliquez une règle CSS qui préserve les passages à la ligne. Vous pouvez aussi créer les nœuds de texte et les balises <br> avec les méthodes du DOM. Évitez de remplacer naïvement chaque \n par <br> avant d’injecter le résultat avec innerHTML : si la chaîne contient du HTML non maîtrisé, le navigateur peut interpréter un contenu indésirable.
Formulaires et e-mails : distinguer texte brut et HTML
Dans un champ de type zone de texte, l’utilisateur peut saisir plusieurs lignes. La valeur transmise contient alors des retours \n. Si cette valeur est envoyée dans un e-mail en texte brut, les retours s’affichent naturellement. Si l’e-mail est construit au format HTML, il faut les convertir proprement en balises <br> ou les présenter dans des paragraphes, selon le sens du message.
Avant d’accuser le navigateur, vérifiez le format de sortie : texte brut, HTML, contenu généré par JavaScript ou éditeur de CMS. Beaucoup de sauts de ligne « disparus » proviennent simplement d’un texte brut affiché dans un conteneur HTML sans règle de conservation des espaces.
Checklist pour un saut de ligne HTML propre
- Utilisez <br> lorsqu’un retour précis appartient réellement au contenu.
- Employez <p> dès qu’il s’agit de séparer des idées ou des blocs de lecture.
- Ne créez jamais de grands espaces en répétant <br>.
- Choisissez <br> en HTML5, sauf convention XHTML explicite imposant <br />.
- Pour du contenu dynamique, traitez séparément les retours \n et la sécurité de l’injection HTML.
- Testez le rendu sur mobile : une mise en ligne forcée doit rester compréhensible dans une colonne étroite.
Bien employée, la balise <br> répond à un besoin précis sans alourdir le code. Elle organise une même information sur plusieurs lignes. Les paragraphes, les listes et les styles CSS structurent la page dans son ensemble.