L'élémentHTML<s> affiche du texte barré. Utilisez l'élément<s> pour représenter des choses qui ne sont plus pertinentes ou plus exactes. Cependant,<s> n'est pas approprié pour indiquer les modifications d'un document ; pour cela, utilisez les éléments<del> et<ins>, selon le cas.

Exemple interactif

<p><s>Quelques billets sont disponibles à la billetterie ce soir.</s></p><p>ÉPUISÉ&nbsp;!</p>

s {  /* Ajoutez vos styles ici */}

Attributs

Cet élément inclut uniquement lesattributs universels.

Accessibilité

Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'éléments. On peut le rendre annonçable via la propriété CSScontent et grâce aux pseudo-éléments::before et::after.

s::before,s::after {  clip-path: inset(100%);  clip: rect(1px, 1px, 1px, 1px);  height: 1px;  overflow: hidden;  position: absolute;  white-space: nowrap;  width: 1px;}s::before {  content: " [Début du texte rayé]";}s::after {  content: " [Fin du texte rayé] ";}

Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été rayé.

• Note brève sur la manière de rendre votre marque plus accessible | The Paciello Group^(angl.)
• Ajuster les styles au niveau du texte | Adrian Roselli^(angl.)

Exemples

.sold-out {  text-decoration: line-through;}

<s>Le plat du jour&nbsp;: Saumon</s> ÉPUISÉ<br /><span>Le plat du jour&nbsp;: Saumon</span> ÉPUISÉ

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément<strike>, alter ego de l'élément<s>, est obsolète et ne doit plus être utilisé sur les sites Web.
• L'élément<del> doit être utilisé à la place si les données ont étésupprimées.
• La propriété CSStext-decoration-line doit être utilisée pour reproduire l'aspect visuel antérieur de l'élément<s>.