Etiqueta HTML <strike>
La obsoleta etiqueta HTML <strike> mostraba texto tachado. Aprende por qué fue eliminada y cómo reemplazarla con <s>, <del> o CSS.
La etiqueta <strike> se usaba para mostrar texto con una línea horizontal en el centro (tachado).
El elemento <strike> es una etiqueta HTML obsoleta y está en desuso en HTML5. No la uses en documentos nuevos. En su lugar, usa <del>, <s> o CSS.
Esta página explica qué hacía <strike>, por qué fue eliminada y, lo más importante, qué usar en su lugar. Si debes usar <del>, <s> o CSS simple depende de lo que significa el tachado, por lo que cada alternativa se muestra con un ejemplo funcional a continuación.
Por qué se eliminó <strike>
HTML5 eliminó <strike> porque solo describía cómo debía verse el texto, no qué significaba. El HTML moderno separa el significado (marcado) de la apariencia (CSS). Una línea sobre un texto puede tener significados muy distintos:
- El texto fue eliminado en una edición → usa
<del>(a menudo combinado con<ins>para indicar el reemplazo). - El texto ya no es exacto ni relevante, pero se mantiene como contexto → usa
<s>. - La línea es puramente visual y no tiene significado semántico → usa la propiedad CSS
text-decoration: line-through.
Elegir el elemento correcto también ayuda a las tecnologías de asistencia y a los motores de búsqueda a entender tu contenido, algo que el genérico <strike> nunca logró.
Cómo era la antigua etiqueta <strike>
La etiqueta <strike> venía en pares, con el contenido entre las etiquetas de apertura (<strike>) y cierre (</strike>). Los navegadores aún la renderizan por compatibilidad con contenido heredado, pero no debes escribir código nuevo de esta forma:
<!-- 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>
Migrar desde <strike>
Reemplaza cada <strike> según el significado del texto tachado.
Opción 1: <del> para contenido eliminado (con <ins>)
Usa <del> cuando un texto fue eliminado durante una edición. Combínalo con <ins> para mostrar el reemplazo — un ejemplo clásico es un precio con descuento.
<!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>El precio anterior se marca como eliminado y el nuevo como insertado — la relación entre ambos ahora tiene significado semántico, no solo visual.
Opción 2: <s> para contenido que ya no es relevante
Usa <s> para contenido que ya no es exacto o relevante pero que se mantiene en la página como contexto — por ejemplo, un elemento completado o no disponible en una lista. No es para ediciones de documentos; usa <del> para eso.
<!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>Opción 3: CSS line-through para tachado puramente visual
Si la línea no tiene ningún significado semántico, usa la propiedad CSS text-decoration en un elemento no semántico como <span> o <p>. Nunca apliques estilos al elemento obsoleto strike — aplica la regla a marcado válido en su lugar.
<!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>