HOWTO · HTML
Créer du texte en gras en HTML
Ce didacticiel présente comment créer du texte en gras en HTML.
Sur cette page
Pour mettre du texte en gras en HTML, utilisez <strong> lorsque le texte est important, <b> pour attirer l’attention sans lui donner plus d’importance, ou la propriété CSS font-weight pour contrôler son poids visuel. Ces options diffèrent par leur sens et leur apparence : choisissez celle qui convient au contenu. (strong)
Utiliser pour les textes sémantiquement importants
Utilisez <strong> pour un texte qui exprime une forte importance, une urgence ou une gravité dans son contexte. Les navigateurs l’affichent généralement en gras par défaut, mais cet élément conserve son sens même si une feuille de style modifie son apparence.
<p><strong>Save your changes before closing the page.</strong></p>
La phrase reste signalée comme importante même si une feuille de style en modifie l’apparence. Dans cet exemple, utilisez <strong> autour de la phrase entière, car l’instruction dans son ensemble est importante.
Exécutez cet exemple :
const message = "Save your changes";
console.log(`<strong>${message}</strong>`);
Cet exemple JavaScript affiche un extrait HTML sous forme de texte ; il ne rend pas une page dans un navigateur. Il n’a pas été exécuté ici.
Utiliser pour attirer l’attention
Utilisez <b> pour attirer l’attention sur un texte sans indiquer qu’il est plus important. Par exemple, cet élément peut signaler un terme clé ou un libellé que les lecteurs doivent remarquer. C’est un élément HTML valide ; choisissez-le lorsque ce repère visuel convient mieux que le sens plus fort de <strong>.
<p>Search results for <b>CSS selectors</b></p>
Choisissez plutôt <strong> lorsque le texte lui-même est important, comme dans un avertissement. L’apparence peut être semblable, mais le sens de ces éléments diffère.
Contrôler le poids visuel avec CSS font-weight
Définissez la propriété CSS font-weight lorsque vous souhaitez agir sur l’apparence. Un style en ligne est pratique pour une modification ponctuelle ; une classe, elle, peut être réutilisée et ajustée dans une feuille de style.
<p style="font-weight: bold;">This text is bold.</p>
<style>
.bold-text {
font-weight: bold;
}
</style>
<p class="bold-text">This text uses a reusable class.</p>
normal demande un poids normal et bold demande un poids gras. bolder et lighter demandent un poids relatif à celui de l’élément parent. Le poids réellement affiché dépend des variantes disponibles dans la police ; ces valeurs ne garantissent donc pas une différence visible avec toutes les polices.
Associer le HTML sémantique et les styles CSS
Utilisez le balisage sémantique pour exprimer le sens et CSS pour contrôler l’apparence. Pour un texte important auquel vous souhaitez donner un poids visuel précis, placez les mots dans <strong>, puis appliquez un style à cet élément ou à une classe qui lui est associée.
<style>
.important {
font-weight: 700;
color: darkred;
}
</style>
<p>Before submitting, read the <strong class="important">confirmation message</strong>.</p>
Ici, <strong> indique que le message est important ; la classe en contrôle le poids et la couleur. Si le texte doit seulement être mis en forme et n’a pas d’importance particulière, appliquez une classe CSS sans ajouter d’emphase sémantique.
Texte en gras et accessibilité
Mettre un texte en gras est purement visuel : les lecteurs d’écran n’annoncent ni les éléments <b> ni les modifications du font-weight en CSS. Si le texte en gras compte pour la compréhension — un avertissement, un terme clé, un champ obligatoire —, balisez-le avec <strong> afin que les technologies d’assistance puissent en transmettre l’importance, et ne vous fiez jamais au gras seul pour porter une signification.