Toolbox

Les balises strong, b, em et i

<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)

Les balises <strong> et <em> servent à donner du sens au contenu qu’ils encadrent. Tant dis que les balises <i> et <b> n’en apporte aucune. Ces dernières servent uniquement à apporter un rendu visuel.

Lorsque l’on veut appliquer une mise en forme visuelle il est préférable de l’ajouter en CSS.

Début de l’article :

Une question se pose fréquemment : quel est le « bon » usage des balises « <strong> », <b>, <em> et <i> ? La tendance générale est à remplacer systématiquement <b> par <strong> et <i> par <em>.

<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>.

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *