Les balises pour mettre en relief dans HTML

Le code HTML dispose d'une série de balises pour distinguer l'essentiel ou le particulier dans un texte.

Ces balises ne sont pas considérées comme obsolètes parcequ'elle ont un rôle sémantique, au contraire des balises de style qu'il est recommandé de remplacer par du code CSS.
Elle sont reconnues par tous les navigateurs, même anciens.

Acronyme et sa définition

Le but de la balise <abbr> est juste d'insérer un attribut title, dont le contenu s'affiche quand on passe la souris sur le texte.

Quand on veut donner donner la définition d'un mot ou acronyme comme GUI.
Quand on veut donner la définition d'un mot ou acronyme comme <abbr title="Graphic User Interface">GUI</abbr>

Cela a le même effet que la balise <span>, mais peut-être customisé en CSS sans affecter tous éléments span dont le rôle est plus général. On peut par exemple souligner en pointillé comme le fait Firefox par défaut.

abbr {
  border-bottom:1px dotted blue;
}

Utiliser un marqueur

C'est une alternative aux modes gras ou souligné...

Le navigateur peut marquer lui-même des parties du texte!
Le navigateur peut <mark>marquer</mark> lui-même des parties du texte!

<strong> ou <b>

La balise b est purement un moyen de présentation, b est l'acronyme de bold, donc gras en français. Strong au contraire est un indicateur sémantique, cela sert à signifier qu'un mot est important dans le texte. L'effet visuel est le même par défaut, mais on peut changer le style de strong (ou b) en CSS.
Le contenu marqué par strong sera toujours considéré essentiel par les parseurs comme ceux des moteurs de recherche.

Un contenu peut s'afficher en strong ou en bold.
Un contenu peut s'afficher en <strong>strong</strong> ou en <b>bold</b>

<em> ou <i>

Même remarque que pour strong et b. Les navigateurs affichent em en italique par défaut, mais c'est à l'utilisateur de choisir comment il veut indiquer l'emphase.

Un contenu peut être mis en emphase ou en italique.
Un contenu peut être <em>mis en emphase</em> ou en <i>italique</i>

Présenter des corrections

Quelquefois il est important de laisser une trace des corrections faites dans un texte. Un moyen simple est l'emploi de la balise del pour le contenu corrigé et ins pour la correction apportée.

Dernière mise à jour en 2015 2016
Dernière mise à jour en <del>2015</del> <ins>2016</ins>

Affichage d'un exemple

La balise samp (sample, échantillon) s'utilise pour présenter le résultat affiché par un programme et si elle à un effet visuel par défaut, il appartient au webmaster de définir sa propre présentation.

Le programme affiche Hello!.
Le programme affiche <samp>Hello!</samp>

Le code d'un programme

Pour afficher le listing du code lui-même...

print "Hello!".
<code>print "Hello!"</code>

Toutes ces balises ont surtout pour intérêt de définir une présentation spécifique en CSS à un type de contenu, mais il n'est pas impossible que les outils de traitement de page (robots de recherche notamment), n'en tirent parti.

Voir aussi...

© 7 mars 2016 Xul.fr