Sur la fiche d'un produit en promotion, l'ancien prix apparaît barré à côté du nouveau. Sur une liste de tâches, une ligne annulée reste visible, barrée elle aussi, alors que le reste de la liste continue de vivre normalement.
Dans les deux cas, le texte barré n'est pas une simple fantaisie graphique : il porte un sens précis, celui d'un contenu qui a été vrai ou pertinent à un moment donné et qui ne l'est plus. C'est exactement ce que sert à dire la balise <s>, à condition de ne pas la confondre avec une modification éditoriale suivie ou avec un simple style visuel.
Définition
<s> (pour strikethrough, texte barré) enveloppe un contenu qui n'est plus exact, plus valable ou plus pertinent, tout en restant affiché pour donner du contexte au lecteur. Le navigateur le trace d'une ligne horizontale par défaut, mais ce style n'est qu'une conséquence de sa signification, jamais sa raison d'être.
Ce que <s> ne dit pas, c'est qu'une modification a eu lieu et qu'elle peut se retracer : ce rôle appartient à <del>. <s> se contente de signaler un contenu périmé, sans historique ni intention de suivi.
Syntaxe et balisage minimal
La balise est un élément en ligne : elle enveloppe un fragment de texte à l'intérieur d'une phrase ou d'un élément plus large, sans créer de nouveau bloc. Elle ne porte aucun attribut spécifique, seulement les attributs globaux comme class ou id.
<p>Abonnement : <s>9,99 € par mois</s> 6,99 € par mois</p>Rien n'empêche de l'imbriquer dans un titre, un élément de liste ou une cellule de tableau : elle se comporte comme n'importe quel texte enrichi placé au fil d'une phrase.
Exemple concret
Voici une fiche produit où l'ancien prix reste visible pour montrer l'ampleur de la remise, l'un des usages les plus courants de cette balise.
<div class="prix">
<s>89 €</s>
<strong>54 €</strong>
<span class="visually-hidden">prix précédent :</span>
</div>Le span masqué visuellement ajoute un repère que le style barré seul ne garantit pas à tout le monde, un point développé dans la section suivante.
Sémantique et accessibilité
Le support du texte barré par les lecteurs d'écran est inégal : certains l'annoncent, d'autres l'ignorent selon les réglages choisis par la personne qui les utilise. Ne comptez jamais sur le seul style visuel pour faire passer une information importante, ajoutez toujours un repère écrit comme « ancien prix » ou « annulé ».
Pour un moteur de recherche comme pour un lecteur d'écran, <s> reste un signal discret : il indique que le contenu est daté, sans garantir qu'il sera mis en avant ni même perçu par tout le monde. C'est un complément au texte, jamais un substitut à une explication claire.
Différence avec <del> et avec une barre purement visuelle
Trois façons de barrer un texte existent en HTML et en CSS, et elles ne se valent pas.
| Outil | Ce qu'il signifie | Exemple d'usage |
|---|---|---|
<s> | Contenu qui n'est plus exact ou pertinent, sans suivi de modification | Prix soldé, option retirée d'un menu |
<del> | Une modification suivie, avec historique d'édition | Suivi des changements d'un contrat, d'un article corrigé |
CSS text-decoration: line-through | Aucune, purement visuel | Un style décoratif sans intention de sens |
<del> se combine souvent avec <ins>, qui montre à l'inverse ce qui a été ajouté : ensemble, ils racontent l'histoire d'une édition, avec des attributs comme cite ou datetime pour préciser quand et pourquoi. <s> ne porte rien de tout cela : il n'affirme jamais qu'une modification a eu lieu, seulement que le contenu n'est plus d'actualité.
Quant au style CSS seul, il ne porte aucune information pour les technologies d'assistance ni pour les moteurs de recherche : un texte barré uniquement en CSS reste, sémantiquement, un texte ordinaire. Réservez cette technique aux effets purement décoratifs, sans conséquence sur le sens du contenu.
Bonnes pratiques
Utilisez <s> uniquement pour du contenu qui a été correct ou pertinent et qui ne l'est plus : un tarif dépassé, une option retirée d'un formulaire, un score sportif corrigé après réclamation. N'y recourez jamais pour le seul effet visuel du trait, ni pour styliser un titre ou une accroche.
Accompagnez toujours le texte barré d'un repère écrit quand la signification compte vraiment, plutôt que de vous reposer sur la seule apparence. Gardez aussi la balise courte : un paragraphe entier barré se lit mal et perd son effet d'annotation ponctuelle.
Questions fréquentes
Peut-on utiliser <s> pour un prix barré sur une fiche produit ?
Oui, c'est l'un des cas d'usage les plus courants et les plus légitimes de cette balise. L'ancien prix reste vrai historiquement, il n'est simplement plus le prix en vigueur, ce qui correspond exactement à ce que <s> est censé exprimer.
Faut-il choisir <s> ou <del> pour montrer une modification dans un document collaboratif ?
<del> convient mieux dès qu'il faut tracer une modification, avec la date et la raison du changement, comme dans un contrat révisé ou un article corrigé après publication. <s> reste préférable quand il s'agit seulement de signaler qu'un contenu n'est plus d'actualité, sans raconter l'historique de l'édition.
Le lecteur d'écran annonce-t-il toujours le texte barré ?
Non, le comportement varie fortement d'un lecteur d'écran à l'autre et selon les réglages choisis par la personne qui l'utilise. Certains signalent le style barré, d'autres le lisent comme un texte ordinaire sans rien annoncer, d'où l'intérêt d'ajouter un repère écrit quand l'information est importante.