Balise HTML <strike>
La balise HTML obsolète <strike> affichait du texte barré. Découvrez pourquoi elle a été supprimée et comment la remplacer par <s>, <del> ou CSS.
La balise <strike> était autrefois utilisée pour afficher du texte avec une ligne horizontale en son milieu (texte barré).
L'élément <strike> est une balise HTML dépréciée et est obsolète en HTML5. Ne l'utilisez pas dans de nouveaux documents. Utilisez <del>, <s> ou CSS à la place.
Cette page explique ce que faisait <strike>, pourquoi elle a été supprimée, et — surtout — ce qu'il faut utiliser à la place. Le choix entre <del>, <s> ou du CSS simple dépend de ce que signifie le texte barré, chaque solution est donc illustrée par un exemple fonctionnel ci-dessous.
Pourquoi <strike> a été supprimée
HTML5 a abandonné <strike> parce qu'elle ne décrivait que l'apparence du texte, non son sens. Le HTML moderne sépare le sens (le balisage) de la présentation (CSS). Une ligne à travers du texte peut avoir des significations très différentes :
- Le texte a été supprimé lors d'une modification → utilisez
<del>(souvent associé à<ins>pour le remplacement). - Le texte n'est plus exact ou pertinent, mais est conservé pour le contexte → utilisez
<s>. - La ligne est purement visuelle sans signification sémantique → utilisez la propriété CSS
text-decoration: line-through.
Choisir le bon élément aide également les technologies d'assistance et les moteurs de recherche à comprendre votre contenu, ce qu'une balise générique <strike> n'a jamais permis.
À quoi ressemblait l'ancienne balise <strike>
La balise <strike> s'utilisait par paires, avec du contenu entre les balises ouvrante (<strike>) et fermante (</strike>). Les navigateurs la restituent encore pour la compatibilité avec les anciens documents, mais vous ne devriez pas écrire de nouveau code de cette façon :
<!-- Obsolete — do not use in new documents -->
<p><strike>I am studying at the school.</strike></p>
<p>I am studying at the university.</p>
Migrer depuis <strike>
Remplacez chaque <strike> en fonction du sens du texte barré.
Option 1 : <del> pour le contenu supprimé (avec <ins>)
Utilisez <del> lorsqu'un texte a été retiré lors d'une modification. Associez-le à <ins> pour afficher le remplacement — l'exemple classique est un prix réduit.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Price: <del>$50.00</del> <ins>$39.99</ins></p>
</body>
</html>L'ancien prix est marqué comme supprimé, et le nouveau comme inséré — la relation entre eux est désormais sémantique, pas seulement visuelle.
Option 2 : <s> pour le contenu qui n'est plus pertinent
Utilisez <s> pour du contenu qui n'est plus exact ou pertinent mais est conservé sur la page pour le contexte — par exemple, un élément complété ou indisponible dans une liste. Elle n'est pas destinée aux modifications de document ; utilisez <del> pour cela.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li><s>Buy milk</s> (already done)</li>
<li>Buy bread</li>
<li>Buy eggs</li>
</ul>
</body>
</html>Option 3 : CSS line-through pour un barré purement visuel
Si la ligne ne porte aucune signification sémantique, utilisez la propriété CSS text-decoration sur un élément non sémantique comme un <span> ou un <p>. Ne stylisez jamais l'élément obsolète strike — appliquez la règle à un balisage valide à la place.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.struck {
text-decoration: line-through;
}
</style>
</head>
<body>
<p><span class="struck">I am studying at the school.</span></p>
<p>I am studying at the university.</p>
</body>
</html>