La balise HTML <b>
La balise <b> permet de mettre en gras une partie du texte pour la rendre plus visible pour l'utilisateur
La balise HTML <b> est utilisée pour afficher une partie du texte en gras afin qu'elle se démarque. La balise <b> ne modifie que l'apparence visuelle ; elle ne porte aucune signification sémantique (y compris pour les moteurs de recherche).
Ce chapitre s'adresse à toute personne qui écrit du HTML et souhaite mettre du texte en gras de la bonne façon. Vous apprendrez à quoi sert la balise <b> en HTML moderne, quand l'utiliser plutôt que CSS, et en quoi elle diffère de <strong>, <i> et <em> — quatre balises qu'il est facile de confondre.
En HTML5, la balise <b> est destinée à une mise en valeur stylistique non sémantique, comme le marquage de mots-clés, de noms de produits ou d'étiquettes d'interface, plutôt que comme substitut d'autres balises.
Quand utiliser la balise <b>
En HTML5, la balise <b> a un objectif précis et limité : attirer l'attention sur une portion de texte pour des raisons purement stylistiques, sans sous-entendre que ce texte est plus important. La spécification HTML cite trois cas classiques :
- Les mots-clés d'un document, par exemple la première occurrence d'un terme technique.
- Les noms de produits dans un avis ou une description.
- La phrase d'accroche ou les premiers mots d'un paragraphe d'article.
<p><b>HTML</b> is the standard markup language for web pages.</p>
<p>The <b>Galaxy S24</b> ships with a brighter display this year.</p>
<p><b>In a hurry?</b> Skip to the summary below.</p>Dans chaque cas, le texte en gras se démarque visuellement, mais n'est pas nécessairement plus important pour le sens de la phrase — c'est cette distinction qui sépare <b> de <strong>.
Évitez d'utiliser la balise <b> pour les titres et les en-têtes. Utilisez plutôt les balises <h1>–<h6>, qui portent une signification dans le plan du document.
<b> ou CSS ?
Si votre objectif est purement visuel et lié à une règle de design — par exemple « tous les noms de produits de ce catalogue sont en gras » — appliquer le gras avec la propriété CSS font-weight est généralement le meilleur choix, car le style se trouve dans votre feuille de style et peut être modifié en un seul endroit. Utilisez la balise <b> lorsque le gras fait partie du contenu du document lui-même (un mot-clé ponctuel ou une introduction), et non d'un motif de design réutilisable. Dans tous les cas, aucune de ces deux approches ne transmet d'importance aux technologies d'assistance — pour cela, vous avez besoin de <strong>.
Syntaxe
La balise <b> fonctionne par paires. Le contenu est écrit entre la balise ouvrante ( <b> ) et la balise fermante ( </b> ).
Exemple de la balise HTML <b> :
Exemple de la balise HTML <b> |W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
</head>
<body>
<p><b>This section of the text </b> has been rendered in bold,</p>
</body>
</html>L'apparence par défaut de l'élément <b> est le gras, mais ce rendu en gras n'est que le style par défaut du navigateur — vous pouvez le modifier avec CSS.
Mettre du texte en gras avec CSS à la place
Lorsque le gras est dicté par votre design plutôt que par le contenu, définissez-le avec la propriété CSS font-weight sur un <span> (ou tout autre élément) au lieu d'utiliser <b> ``. Cela rend le style réutilisable dans votre feuille de style :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
.bold-text {
font-weight: 700;
}
</style>
</head>
<body>
<p>
<span class="bold-text">This section of the text </span>
has been rendered in bold.
</p>
</body>
</html> <b> vs <strong>
Les éléments <b> et <strong> affichent tous deux le texte en gras par défaut, ils ont donc la même apparence à l'écran. La différence réside dans la signification :
<strong><b>
Voici les mêmes mots marqués des deux façons :
<!-- Importance reaches assistive tech -->
<p><strong>Warning:</strong> do not unplug the device while updating.</p>
<!-- Visual attention only, no extra importance -->
<p>The new <b>UltraView</b> monitor is now in stock.</p>Règle générale : si le gras signifie quelque chose — ce texte est plus important et un utilisateur de lecteur d'écran doit le savoir — utilisez <strong> . Si vous souhaitez uniquement un repère visuel, utilisez <b> ou CSS font-weight.
<b> vs <i> , <em> et <strong>
Ces quatre balises sont souvent confondues car deux d'entre elles produisent du gras et deux de l'italique. Elles se divisent selon la même ligne que <b> et <strong> — visuel versus sémantique :
| Balise | Style par défaut | Transmet importance/emphase ? |
|---|---|---|
<b> | Gras | Non — visuel uniquement |
<strong> | Gras | Oui — importance forte |
<i> | Italique | Non — visuel uniquement (voix alternative, termes) |
<em> | Italique | Oui — emphase accentuée |
Ainsi, <b> est le pendant en gras de <i>, et <strong> est le pendant en gras de <em>.
Accessibilité
Les lecteurs d'écran n'attribuent aucun rôle sémantique à l'élément <b> — son texte est annoncé exactement comme le texte environnant, sans changement d'emphase. C'est intentionnel, car <b> est de nature présentationnelle. Conséquence pratique : n'utilisez jamais <b> lorsque l'importance du texte doit être transmise aux utilisateurs de technologies d'assistance. Si une phrase est véritablement plus importante, marquez-la avec <strong> (ou <em> pour l'emphase orale) afin que le sens soit transmis à tous, pas seulement aux lecteurs voyants.
Attributs
La balise <b> prend en charge les Attributs Globaux et les Attributs d'Événements.
Comment appliquer un attribut global à une balise HTML <b>
<p>The <b class="highlight" title="Important keyword">keyword</b> is emphasized here.</p>