1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: '<br> : l''élément de saut de ligne'
slug: Web/HTML/Element/br
tags:
- Element
- HTML
- Reference
- Web
translation_of: Web/HTML/Element/br
---
<div>{{HTMLRef}}</div>
<p>L'élément HTML <code><strong><br></strong></code> crée un saut de ligne (un retour chariot) dans le texte. Il s'avère utile lorsque les sauts de ligne ont une importance (par exemple lorsqu'on écrit une adresse ou un poème).</p>
<div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<div class="note">
<p><strong>Note :</strong> Attention, <code><br></code> ne doit pas être utilisé de façon abusive afin d'augmenter l'espace entre les lignes d'un texte. Pour cela, on utilisera la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref('margin')}} sur l'élément {{HTMLElement("p")}}.</p>
</div>
<h2 id="Attributs">Attributs</h2>
<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
<h3 id="Attributs_obsolètes">Attributs obsolètes</h3>
<dl>
<dt>{{htmlattrdef("clear")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt>
<dd>Cet attribut indique où commencer la prochaine ligne après le saut de ligne.
<div class="note">
<p><strong>Note : </strong>Cet attribut est obsolète avec {{HTMLVersionInline(5)}} et ne doit pas être utilisé ! Il faut privilégier la propriété {{CSSxref('clear')}} à la place.</p>
</div>
</dd>
</dl>
<h2 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h2>
<p><code><br></code> n'a aucun rôle purement stylistique et il sert uniquement à créer une rupture de ligne au sein d'un bloc de texte. Cet élément pourra très peu être mis en forme avec CSS.</p>
<p>Bien qu'il soit possible d'appliquer une marge ({{cssxref("margin")}} sur les éléments <code><br></code> afin d'augmenter l'espacement entre les lignes de texte d'un même bloc, ce n'est pas une bonne pratique. Pour obtenir le même effet, on pourra utiliser la propriété {{cssxref("line-height")}}.</p>
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush:html">Maître corbeau, sur un arbre perché,<br>
Tenait en son bec un fromage.<br>
Maître renard par l'odeur alléché,<br>
Lui tint à peu près ce langage...<br>
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
<h2 id="Accessibilité">Accessibilité</h2>
<p>Utiliser une suite d'éléments <code><br></code> pour uniquement rajouter un espace entre des paragraphes sera source de confusion ou de frustration pour les personnes qui utilisent des outils d'assistance. Les lecteurs d'écran, par exemple, pourront annoncer la présence de l'élément alors qu'il n'y a aucun contenu associé.</p>
<p>Si on souhaite ajouter un espace supplémentaire, on utilisera plutôt la propriété CSS {{cssxref("margin")}}.</p>
<h2 id="Résumé_technique">Résumé technique</h2>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
<td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
</tr>
<tr>
<th scope="row">Contenu autorisé</th>
<td>Aucun, c'est un élément vide.</td>
</tr>
<tr>
<th scope="row">Omission de balise</th>
<td>Cet élément doit avoir une balise de début et ne doit pas avoir de balise de fin. Pour les documents XHTML, on écrira cet élément <code><br /></code>.</td>
</tr>
<tr>
<th scope="row">Parents autorisés</th>
<td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
</tr>
<tr>
<th scope="row">Rôles ARIA autorisés</th>
<td>Tous les rôles sont autorisés.</td>
</tr>
<tr>
<th scope="row">Interface DOM</th>
<td>{{domxref("HTMLBRElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-br-element', '<br>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-br-element', '<br>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("html.elements.br")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{HTMLElement("address")}}</li>
<li>{{HTMLElement("p")}}</li>
</ul>
|
