Balise HTML <s>
La balise HTML <s> marque un texte qui n'est plus exact ou pertinent (ex. un ancien prix). Découvrez ses différences avec <del> et <strike>.
La balise HTML <s> marque un texte qui n'est plus exact ou pertinent — mais qui n'a pas été littéralement supprimé du document. C'est un élément en ligne, et les navigateurs affichent son contenu avec un texte barré (une ligne horizontale traversant le texte) par défaut.
Un usage classique est l'affichage d'un prix réduit : l'ancien prix reste visible mais barré, à côté du prix de vente actuel. Cela indique au lecteur « c'était vrai avant ; voici ce qui est vrai maintenant. »
<s> est un élément HTML5 valide — il n'est pas déprécié. La balise dépréciée est <strike>, que vous ne devriez jamais utiliser dans de nouvelles pages. Préférez <s> (sémantique) ou la propriété CSS text-decoration: line-through (style pur).
Syntaxe
La balise <s> fonctionne par paires. Le contenu se place entre la balise ouvrante (<s>) et la balise fermante (</s>).
Exemple — le cas d'utilisation du prix barré
C'est l'usage le plus courant et idiomatique de <s> : l'ancien prix n'est plus pertinent, il est donc barré, tandis que le prix promotionnel est affiché comme actuel.
Balise HTML <s>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
Hurry, sale ends soon!
<s>Was $50.00</s>
<strong>Now $29.99</strong>
</p>
</body>
</html>Résultat
<s> vs <del> vs <strike>
Ces trois balises produisent toutes une ligne à travers le texte, mais leurs significations sont très différentes. Choisir la bonne balise est ce qui rend votre HTML sémantique plutôt que simplement décoré visuellement.
| Balise | Signification | Utilisez-la quand… | Statut |
|---|---|---|---|
<s> | Le contenu n'est plus exact ou pertinent | Un ancien prix, un détail obsolète, une recommandation qui a changé — le texte d'origine n'a jamais été « supprimé », il est simplement remplacé. | HTML5 valide |
<del> | Le contenu a été supprimé / retiré en tant que modification éditoriale | Le suivi des modifications d'un document. S'associe naturellement à <ins> pour le texte inséré. Prend en charge cite et datetime pour enregistrer pourquoi et quand. | HTML5 valide |
<strike> | Texte barré (présentation uniquement) | Jamais — utilisez <s> ou <del> à la place. | Déprécié |
En résumé : utilisez <s> quand la signification est « ce n'est plus le cas », et <del> quand la signification est « ceci a été supprimé lors d'une modification ». Si vous n'avez besoin que de la ligne visuelle sans signification particulière, utilisez la propriété CSS text-decoration: line-through sur un élément ordinaire.
Accessibilité
Par défaut, les lecteurs d'écran n'annoncent pas le texte barré — la technologie d'assistance lit le contenu de <s> comme n'importe quel autre texte. Ainsi, un utilisateur voyant voit « Was $50.00 » barré, mais un utilisateur de lecteur d'écran entend simplement « Was $50.00 » sans indication que ce texte est obsolète.
Pour les cas où l'état barré a une signification importante, ajoutez un texte masqué visuellement qui l'explicite :
<p>
<s><span class="visually-hidden">Old price: </span>Was $50.00</s>
<strong>Now $29.99</strong>
</p>.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}Attributs
La balise <s> prend en charge les attributs globaux et les attributs d'événement. Elle ne possède pas d'attributs qui lui sont propres.
Mise en forme
Les navigateurs appliquent déjà text-decoration: line-through à <s>, il n'est donc pas nécessaire d'ajouter du CSS juste pour obtenir la ligne. La mise en forme est un remplacement optionnel — par exemple, pour colorer le texte barré sans redéclarer la ligne :
s {
color: gray;
}