Balise HTML <br>
La balise HTML <br> insère un saut de ligne. Découvrez son usage, comment la styliser avec CSS et consultez des exemples pratiques.
La balise HTML <br> insère un saut de ligne. Cette page explique quand un saut de ligne fait partie du contenu (et que <br> est le bon outil), quand il s'agit en réalité d'espacement ou de mise en page (et que CSS est le bon outil), comment les lecteurs d'écran le gèrent, et quelles alternatives — comme <pre> ou la propriété CSS white-space — conviennent au texte versifié et préformaté.
Définition
La balise HTML <br> définit un saut de ligne. Contrairement à la balise <p>, qui crée un saut de paragraphe, la balise <br> déplace simplement le texte suivant à la ligne suivante sans ajouter d'espace vertical supplémentaire.
La règle fondamentale : utilisez <br> uniquement lorsque le saut de ligne fait partie du contenu lui-même — du texte intrinsèquement structuré par lignes, comme une adresse postale, un poème ou des paroles de chanson. Si un saut introduit une nouvelle idée, il s'agit d'un paragraphe, donc utilisez <p>. Si un saut concerne l'espacement ou la mise en page visuelle, c'est une tâche de présentation pour CSS, pas pour <br>.
Syntaxe
La balise <br> est un élément vide en HTML5, ce qui signifie qu'elle ne nécessite pas de balise fermante. Cependant, en XHTML, elle doit être auto-fermante (<br />).
Exemple de la balise HTML <br> :
Exemple de balise br
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the <br> tag usage.</h1>
<p> Inside the paragraph, we can put the tag <br />, <br /> to transfer a part of the text to another line if necessary.</p>
</body>
</html>Utilisation
Utilisez <br> uniquement lorsque le saut de ligne appartient au contenu. Les cas classiques sont les adresses postales, les poèmes et les paroles de chansons, où la structure des lignes porte un sens.
Exemple : une adresse avec <address> et <br>
Une adresse postale est l'utilisation typique de <br> : chaque ligne est véritablement une ligne distincte du même bloc, et non un paragraphe séparé. L'élément <address> fournit la sémantique des coordonnées, et <br> structure les lignes.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<address>
Jane Doe<br />
123 Main Street<br />
Springfield, IL 62704<br />
USA
</address>
</body>
</html>Exemple : poèmes et paroles de chansons
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the <br> tag usage</h1>
<blockquote>
But I'm not the only one<br />
I hope some day you'll join us<br />
And the world will live as one.<br />
</blockquote>
<cite>John Lennon "imagine"</cite>
</body>
</html>Quand ne pas utiliser <br>
<br> sert à structurer les lignes, pas à créer de l'espacement ou une mise en page. Deux utilisations incorrectes fréquentes :
- Séparer des paragraphes. Un saut entre deux idées distinctes est une limite de paragraphe — encadrez chaque bloc avec
<p>. - Créer des espaces verticaux. Empiler plusieurs balises
<br>pour pousser du contenu vers le bas est un bricolage de présentation. L'espacement relève de CSS, via la propriétémargin.
N'utilisez pas <br> pour séparer des paragraphes ou ajouter de l'espacement. Utilisez des éléments <p> avec la propriété CSS margin pour contrôler l'espace vertical.
Accessibilité : pourquoi l'empilement de <br><br> est nuisible
Les lecteurs d'écran annoncent chaque <br> comme un saut de ligne. Lorsque vous en empilez plusieurs pour simuler un écart — par exemple <br><br><br> — le lecteur énonce « saut de ligne, saut de ligne, saut de ligne », ce qui est du bruit sans signification et interrompt le flux de lecture. De plus, les lignes vides n'ont aucune relation sémantique avec le texte environnant, et les technologies d'assistance ne peuvent pas aider l'utilisateur à comprendre la structure du document.
La bonne solution est d'exprimer l'écart sous forme d'espacement en CSS. Remplacez ceci :
<p>First paragraph.</p>
<br /><br /><br />
<p>Second paragraph.</p>par ceci :
<style>
.gap-below {
margin-bottom: 3rem;
}
</style>
<p class="gap-below">First paragraph.</p>
<p>Second paragraph.</p>La version CSS conserve les deux blocs comme de vrais paragraphes et laisse margin gérer la distance visuelle, de sorte que les lecteurs d'écran n'annoncent rien de superflu.
Alternatives pour le texte versifié et préformaté
Lorsqu'un bloc entier est structuré par lignes, contrôler les sauts avec CSS ou <pre> est souvent plus propre que de parsemer le balisage de balises <br>. Un cadre de décision rapide :
- Quelques sauts intentionnels dans un texte courant (une adresse, une ligne ponctuelle dans un paragraphe) : utilisez
<br>. - Un bloc où les sauts de ligne du code source sont ceux que vous voulez, mais les espaces doivent se contracter (par exemple, des vers) : définissez
white-space: pre-linesur le conteneur pour que les retours à la ligne dans le HTML deviennent de vrais sauts de ligne sans aucun<br>. - Du texte où chaque espace et saut de ligne doit être préservé exactement (code, art ASCII) : utilisez l'élément
<pre>, qui affiche le contenu en police à chasse fixe et respecte tous les espaces.
<style>
.poem {
white-space: pre-line;
}
</style>
<p class="poem">
Roses are red
Violets are blue
</p>Ici, les sauts de ligne proviennent du texte source, et white-space: pre-line les transforme en sauts visibles — aucun <br> n'est nécessaire.
Attributs
La balise <br> acceptait autrefois un attribut clear pour contrôler la manière dont le saut interagissait avec les éléments flottants. Cet attribut a été supprimé en HTML5 et ne doit pas être utilisé.
| Attribut | Valeur | Statut |
|---|---|---|
clear | all / left / right / none | Supprimé en HTML5 — ne pas utiliser |
Pour empêcher du contenu de s'enrouler le long d'un élément flottant, utilisez plutôt la propriété CSS clear :
.below-float {
clear: both;
}La balise <br> prend en charge les attributs globaux et les attributs d'événements.