diff options
Diffstat (limited to 'files/fr/web/html/element/b')
| -rw-r--r-- | files/fr/web/html/element/b/index.md | 107 |
1 files changed, 68 insertions, 39 deletions
diff --git a/files/fr/web/html/element/b/index.md b/files/fr/web/html/element/b/index.md index 22ae6d5ce3..e2f5961e9e 100644 --- a/files/fr/web/html/element/b/index.md +++ b/files/fr/web/html/element/b/index.md @@ -14,33 +14,63 @@ tags: translation_of: Web/HTML/Element/b browser-compat: html.elements.b --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>L'élément HTML <strong><code><b></code></strong> permet d'attirer l'attention du lecteur sur un contenu qui n'a pas, pour autant, d'importance significative. Anciennement utilisé pour mettre le texte en gras. Cet élément ne doit pas être utilisé pour mettre en forme des éléments, c'est la propriété CSS <a href="/fr/docs/Web/CSS/font-weight"><code>font-weight</code></a> qu'il faut utiliser. Si l'élément est d'une importance particulière, on utilisera l'élément HTML <a href="/fr/docs/Web/HTML/Element/strong"><code><strong></code></a>.</p> +L'élément HTML **`<b>`** permet d'attirer l'attention du lecteur sur un contenu qui n'a pas, pour autant, d'importance significative. Anciennement utilisé pour mettre le texte en gras. Cet élément ne doit pas être utilisé pour mettre en forme des éléments, c'est la propriété CSS [`font-weight`](/fr/docs/Web/CSS/font-weight) qu'il faut utiliser. Si l'élément est d'une importance particulière, on utilisera l'élément HTML [`<strong>`](/fr/docs/Web/HTML/Element/strong). -<div>{{EmbedInteractiveExample("pages/tabbed/b.html", "tabbed-shorter")}}</div> +{{EmbedInteractiveExample("pages/tabbed/b.html", "tabbed-shorter")}} <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>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</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 + >, + <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content" + >contenu tangible</a + >. + </td> </tr> <tr> <th scope="row">Contenu autorisé</th> - <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">Contenu phrasé</a>.</td> + <td> + <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content" + >Contenu phrasé</a + >. + </td> </tr> <tr> <th scope="row">Omission de balises</th> - <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td> + <td> + Aucune, la balise d'ouverture et la balise de fermeture sont + obligatoires. + </td> </tr> <tr> <th scope="row">Parents autorisés</th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + <td> + Tout élément acceptant 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> @@ -48,51 +78,50 @@ browser-compat: html.elements.b </tr> <tr> <th scope="row">Interface DOM</th> - <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> + <td> + <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> + </td> </tr> </tbody> </table> -<h2 id="attributes">Attributs</h2> +## Attributs -<p>Seuls <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> peuvent être utilisés pour cet élément.</p> +Seuls [les attributs universels](/fr/docs/Web/HTML/Global_attributes) peuvent être utilisés pour cet élément. -<h2 id="usage_notes"><strong>Notes d'utilisation</strong></h2> +## **Notes d'utilisation** -<ul> - <li><code><b></code> est habituellement utilisé pour les mots-clés dans les résumés, les noms de produits dans des tests (sans que ceux-ci aient une importance particulière). Il peut également être utilisé afin d'indiquer la première phrase de chaque paragraphe d'un article.</li> - <li>Il ne faut pas confondre l'élément <code><b></code> avec les éléments <a href="/fr/docs/Web/HTML/Element/strong"><code><strong></code></a>, <a href="/fr/docs/Web/HTML/Element/em"><code><em></code></a>, ou <a href="/fr/docs/Web/HTML/Element/mark"><code><mark></code></a>. L'élément <a href="/fr/docs/Web/HTML/Element/strong"><code><strong></code></a> représente un texte d'une certaine <em>importance</em>, <a href="/fr/docs/Web/HTML/Element/em"><code><em></code></a> met une emphase sur le texte et <a href="/fr/docs/Web/HTML/Element/mark"><code><mark></code></a> représente un texte avec une certaine <em>pertinence</em>. L'élément <code><b></code> ne porte aucune information sémantique particulière ; utilisez-le lorsque qu'aucun autre ne convient.</li> - <li>De la même façon, ne balisez pas les titres en utilisant l'élément <code><b></code>. Pour cet usage, utilisez les balises <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h1></code></a> à <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h6></code></a>. De plus, les feuilles de style peuvent changer le style par défaut de ces éléments. Ils ne seront pas <em>forcément</em> affichés en gras.</li> - <li>C'est généralement une bonne pratique d'utiliser l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> sur l'élément <code><b></code> lorsqu'on souhaite transporter des informations sémantiques supplémentaires. Cela facilitera le développement des styles à appliquer sur le document, sans avoir à modifier le code HTML.</li> - <li>Historiquement, l'élément <code><b></code> a été pensé pour rendre du texte avec une police grasse. Les éléments à seul but stylistique ont été dépréciés avec HTML 4. Ainsi, le sens de l'élément <code><b></code> a évolué.</li> - <li>S'il n'y a aucune raison particulière d'utiliser l'élément <code><b></code>, en dehors de son apparence en gras, l'utilisation de la propriété <a href="/fr/docs/Web/CSS">CSS</a> <a href="/fr/docs/Web/CSS/font-weight"><code>font-weight</code></a> avec une valeur <code>bold</code> est à privilégier.</li> -</ul> +- `<b>` est habituellement utilisé pour les mots-clés dans les résumés, les noms de produits dans des tests (sans que ceux-ci aient une importance particulière). Il peut également être utilisé afin d'indiquer la première phrase de chaque paragraphe d'un article. +- Il ne faut pas confondre l'élément `<b>` avec les éléments [`<strong>`](/fr/docs/Web/HTML/Element/strong), [`<em>`](/fr/docs/Web/HTML/Element/em), ou [`<mark>`](/fr/docs/Web/HTML/Element/mark). L'élément [`<strong>`](/fr/docs/Web/HTML/Element/strong) représente un texte d'une certaine _importance_, [`<em>`](/fr/docs/Web/HTML/Element/em) met une emphase sur le texte et [`<mark>`](/fr/docs/Web/HTML/Element/mark) représente un texte avec une certaine _pertinence_. L'élément `<b>` ne porte aucune information sémantique particulière ; utilisez-le lorsque qu'aucun autre ne convient. +- De la même façon, ne balisez pas les titres en utilisant l'élément `<b>`. Pour cet usage, utilisez les balises [`<h1>`](/fr/docs/Web/HTML/Element/Heading_Elements) à [`<h6>`](/fr/docs/Web/HTML/Element/Heading_Elements). De plus, les feuilles de style peuvent changer le style par défaut de ces éléments. Ils ne seront pas _forcément_ affichés en gras. +- C'est généralement une bonne pratique d'utiliser l'attribut [`class`](/fr/docs/Web/HTML/Global_attributes#attr-class) sur l'élément `<b>` lorsqu'on souhaite transporter des informations sémantiques supplémentaires. Cela facilitera le développement des styles à appliquer sur le document, sans avoir à modifier le code HTML. +- Historiquement, l'élément `<b>` a été pensé pour rendre du texte avec une police grasse. Les éléments à seul but stylistique ont été dépréciés avec HTML 4. Ainsi, le sens de l'élément `<b>` a évolué. +- S'il n'y a aucune raison particulière d'utiliser l'élément `<b>`, en dehors de son apparence en gras, l'utilisation de la propriété [CSS](/fr/docs/Web/CSS) [`font-weight`](/fr/docs/Web/CSS/font-weight) avec une valeur `bold` est à privilégier. -<h2 id="examples">Exemple</h2> +## Exemple -<pre class="brush: html"><p> - Cet article décrit plusieurs éléments <b class="keyword">texte</b>. - Il explique leur usage dans un document <b class="keyword">HTML</b>. -</p> +```html +<p> + Cet article décrit plusieurs éléments <b class="keyword">texte</b>. + Il explique leur usage dans un document <b class="keyword">HTML</b>. +</p> Les mots-clés sont affichés avec le style par défaut de -l'élément &lt;b&gt;, sûrement en gras. -</pre> +l'élément <b>, sûrement en gras. +``` -<h3 id="result">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("example")}}</p> +{{EmbedLiveSample("example")}} -<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>Les autres éléments portants une sémantique textuelle : <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/em"><code><em></code></a>, <a href="/fr/docs/Web/HTML/Element/strong"><code><strong></code></a>, <a href="/fr/docs/Web/HTML/Element/small"><code><small></code></a>, <a href="/fr/docs/Web/HTML/Element/cite"><code><cite></code></a>, <a href="/fr/docs/Web/HTML/Element/q"><code><q></code></a>, <a href="/fr/docs/Web/HTML/Element/dfn"><code><dfn></code></a>, <a href="/fr/docs/Web/HTML/Element/abbr"><code><abbr></code></a>, <a href="/fr/docs/Web/HTML/Element/time"><code><time></code></a>, <a href="/fr/docs/Web/HTML/Element/code"><code><code></code></a>, <a href="/fr/docs/Web/HTML/Element/var"><code><var></code></a>, <a href="/fr/docs/Web/HTML/Element/samp"><code><samp></code></a>, <a href="/fr/docs/Web/HTML/Element/kbd"><code><kbd></code></a>, <a href="/fr/docs/Web/HTML/Element/sub"><code><sub></code></a>, <a href="/fr/docs/Web/HTML/Element/sup"><code><sup></code></a>, <a href="/fr/docs/Web/HTML/Element/i"><code><i></code></a>, <a href="/fr/docs/Web/HTML/Element/mark"><code><mark></code></a>, <a href="/fr/docs/Web/HTML/Element/ruby"><code><ruby></code></a>, <a href="/fr/docs/Web/HTML/Element/rp"><code><rp></code></a>, <a href="/fr/docs/Web/HTML/Element/rt"><code><rt></code></a>, <a href="/fr/docs/Web/HTML/Element/bdo"><code><bdo></code></a>, <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a>, <a href="/fr/docs/Web/HTML/Element/br"><code><br></code></a>, <a href="/fr/docs/Web/HTML/Element/wbr"><code><wbr></code></a>.</li> - <li><a href="https://www.w3.org/International/questions/qa-b-and-i-tags">Utiliser les éléments <code><b></code> et <code><i></code> (W3C)</a></li> -</ul> +- Les autres éléments portants une sémantique textuelle : [`<a>`](/fr/docs/Web/HTML/Element/a), [`<em>`](/fr/docs/Web/HTML/Element/em), [`<strong>`](/fr/docs/Web/HTML/Element/strong), [`<small>`](/fr/docs/Web/HTML/Element/small), [`<cite>`](/fr/docs/Web/HTML/Element/cite), [`<q>`](/fr/docs/Web/HTML/Element/q), [`<dfn>`](/fr/docs/Web/HTML/Element/dfn), [`<abbr>`](/fr/docs/Web/HTML/Element/abbr), [`<time>`](/fr/docs/Web/HTML/Element/time), [`<code>`](/fr/docs/Web/HTML/Element/code), [`<var>`](/fr/docs/Web/HTML/Element/var), [`<samp>`](/fr/docs/Web/HTML/Element/samp), [`<kbd>`](/fr/docs/Web/HTML/Element/kbd), [`<sub>`](/fr/docs/Web/HTML/Element/sub), [`<sup>`](/fr/docs/Web/HTML/Element/sup), [`<i>`](/fr/docs/Web/HTML/Element/i), [`<mark>`](/fr/docs/Web/HTML/Element/mark), [`<ruby>`](/fr/docs/Web/HTML/Element/ruby), [`<rp>`](/fr/docs/Web/HTML/Element/rp), [`<rt>`](/fr/docs/Web/HTML/Element/rt), [`<bdo>`](/fr/docs/Web/HTML/Element/bdo), [`<span>`](/fr/docs/Web/HTML/Element/span), [`<br>`](/fr/docs/Web/HTML/Element/br), [`<wbr>`](/fr/docs/Web/HTML/Element/wbr). +- [Utiliser les éléments `<b>` et `<i>` (W3C)](https://www.w3.org/International/questions/qa-b-and-i-tags) |