Comment donner un coup de stabilo web ?

Le langage HTML met à disposition deux marqueurs sémantiques pour accentuer le texte : <em> et <strong>. Pour distinguer un mot important, utilisez <em>. S’il s’agit d’insister plus fortement sur un mot ou un passage particulièrement important, utilisez <strong>. Ces éléments HTML sont généralement rendu en italique et gras, respectivement, à ne pas confondre avec les éléments <i> et <b> qui n’ont aucune valeur sémantique [1].

J’ai souvent pensé qu’il manquait un style par défaut, en plus de ces deux marqueurs d’importance : le coup de stabilo [*], ou surlignage, généralement jaune fluo. Les puristes répondront que <em> et <strong> suffisent, car il est rare, dans un texte bien rédigé, d’avoir besoin de davantage. Si on laissait faire les rédacteurs, il faudrait aussi du texte clignotant, qui défile… de quoi transformer le site en sapin de Noël ! Certes. Il n’empêche. Je persiste. C’est ce qu’illustre l’article ci-dessous, qui utilise gras et italique à bon escient. Mais aussi le surlignage.

role="group">

Pour faciliter la lecture à l’écran, il faut rythmer le texte, par des repères visuels. Illustrations, hyperliens et enrichissements typographiques servent de repères au lecteur. Cet article utilise <em> pour accentuer le mot « refouler » et le <strong> pour marquer certaines phrases clef. C’est parfait ! Bien utilisé, le <strong> permet une lecture en diagonale, en donnant rapidement connaissance des idées principales, accrochant bien l’œil et invitant à lire alentour pour la préciser : Ramasser des feuilles mortes avec une pelle, franchement, c’est pas vraiment conseillé. Pourquoi ? Je poursuis la lecture pour le savoir. Un peu comme les intertitres, mais à un niveau de lecture juste en dessous, et sans la notion d’amorce de section inhérente aux titres.

Les extraits surlignés de cet exemple, constitueraient de bonnes exergues en presse magazine papier : Un amas détrempé ralentissait le train jusqu’à l’arrêter totalement ou l’adhérence faiblit, les roues patinent, tournent dans le vide, comme un pneu de voiture sur la glace. Les exergues mettent en valeur des passages fort, en les citant à l’écart du texte courant, en gros caractères, ce qui est très accrocheur sur papier, mais moins évident sur le Web où cela constitue une répétition. Les surligner est une approche intéressante : comme si quelqu’un était passé avant moi donner des coups de stabilo [*].

Surlignons donc. Notre exemple est codé comme suit, en jaune #ffff99 :

<span style="background-color: #ffff99;">Un amas détrempé ralentissait le train jusqu'à l'arrêter totalement</span>

J’aurais plutôt utilisé une balise porteuse de sens et une couleur translucide, portée par un sélecteur dédié, comme suit :

.stabilo { background-color: rgba(255,255,153,0.25); }

<strong class="stabilo">Un amas détrempé ralentissait le train jusqu'à l'arrêter totalement</strong>

Et vous ? <em> ou <strong> ? Non, pas <stabilo>, voyons !

Et pour le jaune ? D’après CoulourLovers, la couleur « STABILO BOSS » est du #BFFA37 mais, pardonnez-moi de chipoter, cela me semble être du vert fluo. En réalité, on s’en fiche un peu, les variations subtiles de jaune n’étant pas perceptibles par notre œil. Vue sur le site de la couleur Pourpre.com, voici une image contenant successivement 65 jaunes, de #FFFF00 à #FFFF40, de gauche à droite :

En distinguez-vous vraiment toutes les nuances ?