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

S'il ne faut retenir qu'une chose :

<strong> ne remplace pas la balise <b>.
<em> ne remplace pas la balise <i>

Les normes actuelles tendent à inviter le concepteur Web à séparer le contenur de la mise en forme, sous-entendu séparer la structure HTML des effets visuels (CSS).

Voilà pourquoi toutes les balises dont l'emploi se cantonnait à apporter un rendu visuel sont devenues dépréciées, voire obsolètes, parallèlement à l'évolution des versions de HTML.

Une question se pose fréquemment : quel est le "bon" usage des balises <strong>, <b>, <em> et <i> ? Une erreur commune consiste à remplacer systématiquement <b> par <strong> et <i> par <em>.

Petit rappel explicatif des différentes balises :

• <i> : Indique une portion de texte "décalée" du contenu principal (par défaut en italique)
• <b> : Indique un texte mis en valeur différemment (par défaut en gras)
• <em> : Indique une portion de texte affectée par une emphase.
• <strong> : Indique une mise en exergue plus forte (renforcement)

Il est à noter qu'aucune de ces balises n'est considérée comme dépréciée ou obsolète dans les spécifications HTML4 ou HTML5. Les balises <i> et <b> sont bel et bien des éléments dont le seul but est de créer une mise en forme purement visuelle (pour la plupart des navigateurs le choix se porte sur l'italique pour l'une, et gras pour l'autre).

Et <strong> et <em> dans tout ça ?

Là où le soucis et la confusion commencent, c'est que les navigateurs ont en règle générale adopté un rendu italique pour la balise <em> et une mise en gras pour la balise <strong>. Or, ce choix conventionnel des navigateurs ne repose sur aucune règle établie : dans le futur, ils pourraient très bien décider d'afficher <strong> en taille de caractère agrandie ou <em> avec un retrait à gauche et en couleur, etc.

Il faut reconnaître que les balises <i> et <b> n'apportent aucun sens (sémantique) au document contrairement aux éléments <strong> et <em> qui sont des mises en exergue. Or il faut bien comprendre qu'une mise en italique et une mise en gras n'implique pas forcément que le texte doit être plus important. Si c'est souvent le cas, il ne faut pas penser que les balises sont équivalentes.

Par quoi remplacer <i> et <b> ?

Dans la plupart des cas, ces balises sont utilisés pour donner de l'importance au texte, de façon visuelle. L'emploi des balises <strong> et <em> est donc tout à fait pertinent selon la force que l'on veut conférer au texte déterminé.

Par contre, il ne faut pas préjuger du rendu que va choisir le navigateur. Il est préférable de préciser la mise en forme désirée via les styles CSS (font-style: italic et font-weight: bold). Selon les autres cas, et selon le sens donné à l'élément, les balises <dfn>, <var>, <cite>, <samp>, <code> ou... <span> sont bien plus pertinentes.

<span> : un abus ?

L'emploi de la balise neutre <span> peut paraître incongru au premier abord. En effet, cela implique un code relativement complexe, simplement pour éviter d'utiliser la simple balise <i> :

<p>Un texte affiché <span class="italique">en italique</span></p>

.italique {font-style: italic;}

Si l'objectif se limite à afficher le texte en italique et que la balise n'a aucune autre fonction d'emphase, de citation, etc. C'est pourtant la solution qu'il conviendrait d'employer.

Les recommandations expliquent ce point :

Les éléments DIV et SPAN, en conjonction avec les attributs id et class, offrent un mécanisme générique qui rajoute de la structure aux documents. Ces éléments définissent le contenu comme étant en-ligne (SPAN) ou de bloc (DIV) mais n'imposent aucune autre expression de présentation sur le contenu. Ainsi, les auteurs peuvent utiliser ceux-ci en conjonction avec les feuilles de style, l'attribut lang, etc., pour exploiter HTML selon leurs besoins et leurs goûts propres.

L'exemple suivant précise l'emploi de la balise <span> :

<span class="client-title">
Informations sur le client :
</span>

Par la suite, nous pourrons facilement rajouter des déclarations de feuilles de style pour affiner la présentation de ces entrées de la base de données. Pour un autre exemple d'utilisation, veuillez consulter l'exemple dans la section sur les attributs class et id.

Même si le résultat est plus lourd qu'en utilisant les balises <i> et <b>, il est préférable d'utiliser cette technique, à condition que l'objectif soit uniquement d'obtenir un effet visuel italique ou gras.