diff options
Diffstat (limited to 'files/fr/web/html/element/br/index.md')
| -rw-r--r-- | files/fr/web/html/element/br/index.md | 129 |
1 files changed, 80 insertions, 49 deletions
diff --git a/files/fr/web/html/element/br/index.md b/files/fr/web/html/element/br/index.md index 0c5b97e35d..a3e251e54a 100644 --- a/files/fr/web/html/element/br/index.md +++ b/files/fr/web/html/element/br/index.md @@ -10,104 +10,135 @@ tags: translation_of: Web/HTML/Element/br browser-compat: html.elements.br --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<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> +L'élément HTML **`<br>`** 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). -<div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</div> +{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}} -<p>Comme vous pouvez le voir dans l'exemple ci-dessus, un élément <code><br></code> est inclus à chaque point où nous voulons que le texte soit interrompu. Le texte après le <code><br></code> recommence au début de la ligne suivante du bloc de texte.</p> +Comme vous pouvez le voir dans l'exemple ci-dessus, un élément `<br>` est inclus à chaque point où nous voulons que le texte soit interrompu. Le texte après le `<br>` recommence au début de la ligne suivante du bloc de texte. -<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> <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> sur l'élément HTML <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a>.</p> -</div> +> **Note :**Attention, `<br>` 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é [CSS](/fr/docs/Web/CSS) [`margin`](/fr/docs/Web/CSS/margin) sur l'élément HTML [`<p>`](/fr/docs/Web/HTML/Element/p). -<h2 id="attributes">Attributs</h2> +## Attributs -<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> +Comme pour tous les éléments, on peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes). -<h3 id="deprecated_attributes">Attributs obsolètes</h3> +### Attributs obsolètes -<dl> - <dt><strong><code>clear</code></strong> {{deprecated_inline}}</dt> - <dd>Cet attribut indique où commencer la prochaine ligne après le saut de ligne.</dd> -</dl> +- **`clear`** {{deprecated_inline}} + - : Cet attribut indique où commencer la prochaine ligne après le saut de ligne. -<h2 id="styling_with_css">Mise en forme avec CSS</h2> +## Mise en forme avec CSS -<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> +`<br>` 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>Bien qu'il soit possible d'appliquer une marge (<a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> 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é <a href="/fr/docs/Web/CSS/line-height"><code>line-height</code></a>.</p> +Bien qu'il soit possible d'appliquer une marge ([`margin`](/fr/docs/Web/CSS/margin) sur les éléments `<br>` 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é [`line-height`](/fr/docs/Web/CSS/line-height). -<h2 id="examples">Exemples</h2> +## Exemples -<h3 id="simple_br">Simple rupture de ligne</h3> +### Simple rupture de ligne -<p>Dans l'exemple suivant, nous utilisons des éléments <code><br></code> pour créer des sauts de ligne entre les différentes lignes d'une adresse postale :</p> +Dans l'exemple suivant, nous utilisons des éléments `<br>` pour créer des sauts de ligne entre les différentes lignes d'une adresse postale : -<pre class="brush:html">Mozilla<br> -331 E. Evelyn Avenue<br> -Mountain View, CA<br> -94041<br> -USA<br></pre> +```html +Mozilla<br> +331 E. Evelyn Avenue<br> +Mountain View, CA<br> +94041<br> +USA<br> +``` -<p>Le résultat ressemble à ceci :</p> +Le résultat ressemble à ceci : -<p>{{EmbedLiveSample('simple_br', '', '130')}}</p> +{{EmbedLiveSample('simple_br', '', '130')}} -<h2 id="accessibility_concerns">Accessibilité</h2> +## Accessibilité -<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> +Utiliser une suite d'éléments `<br>` 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>Si on souhaite ajouter un espace supplémentaire, on utilisera plutôt la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>.</p> +Si on souhaite ajouter un espace supplémentaire, on utilisera plutôt la propriété CSS [`margin`](/fr/docs/Web/CSS/margin). -<h2 id="technical_summary">Résumé technique</h2> +## Résumé technique <table class="properties"> <tbody> <tr> - <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th> - <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + <th scope="row"> + <a href="/fr/docs/Web/Guide/HTML/Content_categories" + >Catégories de contenu</a + > + </th> + <td> + <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content" + >Contenu de flux</a + >, + <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content" + >contenu phrasé</a + >. + </td> </tr> <tr> <th scope="row">Contenu autorisé</th> - <td>Aucun, c'est un <a href="/fr/docs/Glossary/Empty_element">élément vide</a>.</td> + <td> + Aucun, c'est un + <a href="/fr/docs/Glossary/Empty_element">élément vide</a>. + </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> + <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/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + <td> + Tout élément qui accepte du + <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content" + >contenu phrasé</a + >. + </td> </tr> <tr> <th scope="row">Rôle ARIA implicite</th> - <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td> + <td> + <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" + >Pas de rôle correspondant</a + > + </td> </tr> <tr> <th scope="row">Rôles ARIA autorisés</th> - <td><a href="https://w3c.github.io/aria/#none"><code>none</code></a>, <a href="https://w3c.github.io/aria/#presentation"><code>presentation</code></a></td> + <td> + <a href="https://w3c.github.io/aria/#none"><code>none</code></a + >, + <a href="https://w3c.github.io/aria/#presentation" + ><code>presentation</code></a + > + </td> </tr> <tr> <th scope="row">Interface DOM</th> - <td><a href="/fr/docs/Web/API/HTMLBRElement"><code>HTMLBRElement</code></a></td> + <td> + <a href="/fr/docs/Web/API/HTMLBRElement"><code>HTMLBRElement</code></a> + </td> </tr> </tbody> </table> -<h2 id="specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications}}</p> +{{Specifications}} -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat}}</p> +{{Compat}} -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'élément <a href="/fr/docs/Web/HTML/Element/address"><code><address></code></a></li> - <li>L'élément <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a></li> - <li>L'élément <a href="/fr/docs/Web/HTML/Element/wbr"><code><wbr></code></a></li> -</ul> +- L'élément [`<address>`](/fr/docs/Web/HTML/Element/address) +- L'élément [`<p>`](/fr/docs/Web/HTML/Element/p) +- L'élément [`<wbr>`](/fr/docs/Web/HTML/Element/wbr) |