La différence entre les balises <b> et <strong> en HTML
Dans le monde du développement web, les balises HTML <b> et <strong> sont souvent confondues car elles produisent toutes les deux un texte en gras par défaut dans les navigateurs. Cependant, elles n’ont pas la même signification sémantique, surtout depuis HTML5. Utiliser la bonne balise est important pour la sémantique du code, l’accessibilité et le référencement. Cet article explique en détail leurs différences.
L’apparence visuelle : identique par défaut
Les deux balises rendent le texte en gras :
<b>Texte en b</b>→ Texte en b<strong>Texte en strong</strong>→ Texte en strong
Mais cette mise en forme est contrôlée par le CSS par défaut. Vous pouvez la modifier avec font-weight: normal; si besoin. L’apparence n’est pas le critère principal pour choisir l’une ou l’autre.
La sémantique : la vraie différence
<strong>: Indique une importance forte, une urgence ou une gravité. Elle transmet une signification sémantique : le texte est plus important que le reste. Par exemple, pour un avertissement ou une mise en garde.
Selon la spécification HTML5 (MDN Web Docs) :<strong>représente un texte d’une « forte importance » (strong importance), de sérieux ou d’urgence.<b>: Utilisée pour attirer l’attention sur un texte sans lui conférer d’importance particulière. C’est une balise stylistique redéfinie en HTML5 pour des cas où aucun autre élément sémantique ne convient (comme des mots-clés dans un résumé, noms de produits, etc.).
Selon MDN :<b>attire l’attention du lecteur sans accorder d’importance spéciale. À n’utiliser que comme dernier recours.
En résumé :
| Balise | Signification sémantique | Usage recommandé | Exemple typique |
|---|---|---|---|
<strong> | Importance forte, urgence, sérieux | Avertissements, éléments cruciaux | Attention : danger ! |
<b> | Attirer l’attention sans importance | Mots-clés stylistiques, noms de produits | Introduction : Les produits phares |
Accessibilité et lecteurs d’écran
Les lecteurs d’écran (comme NVDA ou VoiceOver) interprètent différemment :
<strong>: Souvent prononcé avec une intonation plus forte ou un ton plus grave pour indiquer l’importance.<b>: Généralement lu normalement, sans emphase supplémentaire, car il n’a pas de sémantique d’importance.
Cela améliore l’expérience pour les utilisateurs malvoyants.
Meilleures pratiques
- Préférez
<strong>quand le texte a une réelle importance. - Utilisez
<b>seulement si aucun autre élément sémantique ne convient (rarement). - Pour du gras purement visuel : Utilisez CSS ! Par exemple :
<span style="font-weight: bold;">Texte en gras</span>
Ou mieux, une classe CSS :
.gras { font-weight: bold; }
<span class="gras">Texte en gras</span>
Évitez d’abuser des balises pour du style : séparez le contenu (HTML) de la présentation (CSS).
Conclusion
Bien que <b> et <strong> paraissent similaires, choisir la bonne balise renforce la sémantique de votre code, améliore l’accessibilité et suit les standards modernes d’HTML5. En cas de doute, optez pour <strong> si c’est important, ou CSS pour du style pur. Votre site n’en sera que plus professionnel et accessible !