STRONG, B, I, EM : gras ou italique, quelle balise utiliser et pourquoi ?

Une question se pose fréquemment : quel est le "bon" usage des balises <strong>, <b>, <em> et <i> ? La tendance a longtemps été de remplacer <b> par <strong> et <i> par <em> en pensant que c'était une meilleure pratique sémantique, or la réponse ne se résume pas à cette simple correspondance, ni à un simple choix visuel. Pour écrire un code HTML sémantique, propre et pérenne, il est crucial de comprendre la nuance et l'intention derrière chacune de ces balises.

S'il ne faut retenir qu'une chose :

La sémantique avant tout ! <strong> et <em> donnent un sens au contenu. Tandis que <b> et <i> apportent une distinction visuelle sans changer l'importance du texte.

Par exemple si vous parcourez le web avec une synthèse vocale, celle-ci prendra une intonation différente en rencontrant <strong> et <em>. Mais pas avec <b> et <i> qui sont considérées comme "décoratives".

Sémantique ou présentation

Le code HTML a pour rôle de structurer et de donner du sens à votre contenu. Il indique ce qu'est un élément : un titre, un paragraphe, une liste, un texte important, etc.

Le code CSS, lui, a pour rôle de gérer la mise en forme et l'apparence. Il indique à quoi ressemble un élément : sa couleur, sa police, sa taille, son espacement.

Utiliser une balise HTML uniquement pour son effet visuel est une approche dépassée, mais souvent mal comprise car la balise <b> a toujours été pensée (et conservée par rétrocompatibilité) pour passer le texte en gras tandis que <i> le passe en italique.

Les balises sémantiques <strong> et <em>

Ces balises informent le navigateur (et les technologies d'assistance comme les lecteurs d'écran) que le texte qu'elles entourent a une signification particulière.

<strong> : L'importance, le sérieux ou l'urgence

Utilisez <strong> pour marquer un texte qui a une grande importance. Ce n'est pas juste une suggestion visuelle ; vous affirmez que ce contenu est crucial. Les lecteurs d'écran peuvent changer d'intonation pour souligner cette importance.

Cas d'usage :

• Avertissements : <strong>Attention :</strong> Le sol est glissant.
• Instructions critiques dans un tutoriel : Il est <strong>essentiel</strong> de sauvegarder vos fichiers avant de continuer.
• Phrases clés qui résument une idée : En résumé, <strong>la collaboration était la clé du succès</strong>.

<p><strong>Avertissement :</strong> Ne débranchez jamais l'appareil pendant la mise à jour.</p>

<em> : L'emphase qui change le sens

Utilisez <em> pour mettre l'accent sur un mot ou un groupe de mots, de manière à modifier le sens de la phrase. Pensez à la façon dont vous changeriez votre intonation à l'oral.

Exemples :

• J'aime le gâteau au kiwi. (Déclaration neutre)
• J'<em>aime</em> les saucisses de Strasbourg. (L'accent est mis sur le sentiment, pas sur une simple appréciation.)
• <em>Moi</em>, j'aime les tartes flambées !. (C'est moi, par opposition à quelqu'un d'autre.)

<p>Il ne faut <em>surtout pas</em> appuyer sur ce bouton.</p>
<p>Tu es sûr que c'est <em>toi</em> qui as vu ça ?</p>

Les balises de distinction : <b> et <i>

Contrairement à une idée reçue, <b> et <i> ne sont pas obsolètes en HTML (ou HTML5). Leur définition a été clarifiée : elles servent à différencier un texte du reste du paragraphe sans lui conférer une importance ou une emphase particulière. Elles sont utiles lorsque l'usage du gras ou de l'italique est une convention typographique.

<b> : Attirer l'attention

Utilisez <b> pour attirer l'œil sur un mot ou une phrase sans que cela implique une plus grande importance.

Cas d'usage :

• Mots-clés dans un résumé : Cet article explore les concepts de <b>sémantique</b> et d'<b>accessibilité</b>.
• Noms de produits dans une critique : Le nouveau <b>KiwiPhone</b> est enfin disponible.
• La première phrase d'un article pour la faire ressortir, bien que ce ne soit pas une solution idéale.

<i> : Texte idiomatique

Utilisez <i> pour un texte qui se distingue par sa "voix" ou sa nature. Il est par défaut présenté en italique.

Cas d'usage :

• Termes techniques ou taxonomiques : Le kiwi, Actinidia Deliciosa, est un fruit plein de vitamines.
• Noms propres ou noms d'œuvres : Le Titanic a sombré avec un exemplaire de 20 000 lieues sous les mers à son bord.
• Pensées d'un personnage : Que vais-je faire maintenant ?, pensa-t-elle.
• Mots ou phrases dans une langue étrangère : Il a eu un deja vu étrange. On ajoutera un attribut lang avec le code correspondant.

<p>En français, le mot anglais <i lang="en">developer</i> se traduit par développeur.</p>

Et pour le référencement ? (SEO)

Google comprend la différence entre balises sémantiques (em / strong) et purement visuelles (i / b). Les balises sémantiques peuvent légèrement aider à poser un contexte ou marquer l'importance d'un mot, mais elles ne vont pas propulser votre page en tête des résultats de recherche. Leur effet est surtout indirect, elles aident Google à mieux comprendre la structure générale et le sens du texte, ce qui peut améliorer la pertinence perçue. Si vous en abusez (tout passer en <strong> 🫤), l’effet est nul et ça peut même nuire à la lisibilité de votre page.

Récapitulons

Et si je veux juste du gras ou de l'italique ?

Que faire si vous voulez mettre un mot en gras ou en italique pour une raison purement décorative ou stylistique, sans aucune des justifications sémantiques ou conventionnelles ci-dessus ? Utilisez CSS. La balise <span> est un bon choix, elle est sémantiquement neutre et n'a pour vocation (dans ce cas) que d'appliquer des styles.

<p>Connecté en tant que <span class="username">Georges Moustaki</span>.</p>

.username {
  font-weight: bold;
}

Cette approche respecte la traditionnelle séparation : HTML (<span>) ne donne aucun sens particulier, et CSS (font-weight: bold;) s'occupe de l'apparence.