Balise HTML <s> et <strike> — Barrer du texte en HTML

Présentation des balises <s> et <strike>

Les balises <s> et <strike> permettent d'afficher du texte barré en HTML, c'est-à-dire un texte surmonté d'une ligne horizontale traversant les caractères. Ce style visuel est couramment utilisé pour indiquer qu'une information est obsolète, annulée ou remplacée — par exemple un ancien prix promotionnel, un article supprimé d'une liste, ou une clause contractuelle révoquée.

En HTML5, la balise <s> a été conservée avec une sémantique précise : elle signifie que le contenu n'est plus exact ou pertinent, sans impliquer une suppression éditoriale (pour cela on préfère <del>). En revanche, <strike> est officiellement dépréciée depuis HTML4 et absente du standard HTML5 — son usage est déconseillé dans tout nouveau projet.

Pour une mise en forme purement visuelle sans signification sémantique, la méthode recommandée est d'utiliser la propriété CSS text-decoration avec la valeur line-through.

Syntaxe et utilisation de la balise <s>

La balise <s> est une balise en ligne (inline) à fermeture obligatoire. Elle encadre le texte à barrer entre sa balise ouvrante <s> et sa balise fermante </s>. Elle peut contenir du texte brut ou d'autres éléments inline.

Exemple 1 — Utilisation basique des balises <s> et <strike> : cet exemple illustre le rendu visuel des deux balises pour afficher du texte barré.

<p>
  
  <s>Ancien prix : 49,99 €</s> <strong>Nouveau prix : 29,99 €</strong>
  
  <strike>Texte barré avec &lt;strike&gt; (déconseillé)</strike>
</p>

Alternative CSS recommandée : text-decoration:line-through

Pour du texte barré CSS sans sémantique particulière, la bonne pratique HTML5 consiste à appliquer la propriété text-decoration:line-through via une feuille de style ou un attribut style inline. Cette approche offre plus de flexibilité (couleur, épaisseur de ligne) et sépare proprement la présentation de la structure.

Exemple 2 — Barrer du texte avec CSS text-decoration:line-through : démonstration de l'alternative CSS pure, applicable à n'importe quel élément HTML.

/* CSS : règle de classe pour texte barré réutilisable */
.texte-barre {
  text-decoration: line-through;      /* Barre le texte */
  color: #999;                         /* Grisé pour indiquer l'obsolescence */
}

/* HTML : application via classe CSS */
<p class="texte-barre">Prix initial : 49,99 €</p>

/* HTML : application via style inline (pratique mais moins maintenable) */
<span style="text-decoration:line-through;">Offre expirée</span>

Différence sémantique entre <s>, <del> et CSS

En HTML5 sémantique, il est important de choisir la bonne approche selon le contexte :

• <s> : contenu plus pertinent ou exact mais non supprimé éditoralement (ex. : prix promotionnel dépassé, information périmée).
• <del> : contenu supprimé lors d'une révision de document, souvent accompagné de <ins> pour le remplacement. Utilisé avec l'attribut datetime pour indiquer la date de suppression.
• CSS text-decoration:line-through : mise en forme visuelle uniquement, sans sens sémantique — idéal pour les interfaces UI (listes de tâches cochées, paniers e-commerce).

Exemple 3 — Comparaison <s> vs <del> avec attribut datetime :

<p>Notre agence était située au <s>12 rue de la Paix, Paris</s> — nous avons déménagé.</p>


<p>Tarif : <del datetime="2026-01-01">89 €</del> <ins>69 €</ins></p>


<li style="text-decoration:line-through; color:#aaa;">Acheter du pain</li>

Tableau des attributs de la balise <s>

La balise <s> accepte les attributs universels HTML5 (id, class, style, title, lang, dir, hidden) ainsi que les attributs d'événements (onclick, onmouseover, etc.). Elle ne possède pas d'attributs spécifiques propres. La colonne DTD ci-dessous indique dans quel profil HTML 4.01/XHTML 1.0 l'attribut était autorisé : S=Strict, T=Transitional, F=Frameset.

Compatibilité navigateurs et bonnes pratiques 2026

La balise <s> est universellement supportée par tous les navigateurs modernes (Chrome, Firefox, Edge, Safari, Opera) ainsi que sur mobile (Android, iOS). Son rendu est cohérent : le texte apparaît avec une ligne traversante centrée.

En 2026, les recommandations du W3C et des standards WCAG restent claires :

• Privilégier <s> à <strike> (obsolète HTML5) pour tout nouveau développement.
• Ajouter un texte alternatif accessible via aria-label ou un texte adjacent si le barrage porte une information essentielle, car les lecteurs d'écran ne signalent pas forcément le texte barré.
• Utiliser CSS text-decoration:line-through pour les interfaces dynamiques (e-commerce, listes interactives) afin de contrôler finement le style.

Exemple 4 — Accessibilité et texte barré (bonne pratique WCAG) :

<p>
  <s><span aria-label="Ancien prix">Prix : 99 €</span></s>
  
  <span class="sr-only">(remplacé par)</span>
  <strong>Prix soldé : 59 €</strong>
</p>

   Vous êtes ici : Balise <s> et <strike>     Retour à la liste des balises

Par carabde | Mis à jour le 14 mars 2026