Etiqueta HTML <s>
La etiqueta HTML <s> marca texto que ya no es exacto o relevante (p. ej., un precio antiguo). Descubre en qué se diferencia de <del> y <strike>, con ejemplos.
La etiqueta HTML <s> marca texto que ya no es exacto o relevante — pero que no fue eliminado literalmente del documento. Es un elemento en línea y los navegadores muestran su contenido con un tachado (una línea horizontal sobre el texto) de forma predeterminada.
Un uso clásico es mostrar un precio rebajado: el precio antiguo permanece visible pero tachado, junto al precio de oferta actual. Esto le indica al lector "esto antes era cierto; esto es lo que es cierto ahora."
<s> es un elemento HTML5 válido — no está obsoleto. La etiqueta obsoleta es <strike>, que nunca debes usar en páginas nuevas. Usa <s> (semántica) o CSS text-decoration: line-through (estilo puro) en su lugar.
Sintaxis
La etiqueta <s> va en pares. El contenido se coloca entre las etiquetas de apertura (<s>) y cierre (</s>).
Ejemplo — el caso de uso del precio tachado
Este es el uso más habitual e idiomático de <s>: el precio original ya no es relevante, por lo que aparece tachado, mientras que el precio de oferta se muestra como el actual.
Etiqueta 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>Resultado
<s> vs <del> vs <strike>
Las tres etiquetas producen una línea sobre el texto, pero tienen significados muy distintos. Elegir la correcta es lo que hace que tu HTML sea semántico en lugar de meramente decorativo a nivel visual.
| Etiqueta | Significado | Úsala cuando… | Estado |
|---|---|---|---|
<s> | El contenido ya no es exacto o relevante | Un precio antiguo, un detalle desactualizado, una recomendación que ha cambiado — el texto original nunca fue "eliminado", simplemente fue reemplazado. | HTML5 válido |
<del> | El contenido fue eliminado como cambio editorial | Para rastrear ediciones en un documento. Se combina naturalmente con <ins> para texto insertado. Admite los atributos cite y datetime para registrar por qué y cuándo. | HTML5 válido |
<strike> | Tachado (solo presentación) | Nunca — usa <s> o <del> en su lugar. | Obsoleto |
En resumen: usa <s> cuando el significado es "esto ya no es el caso" y usa <del> cuando el significado es "esto fue editado y eliminado." Si solo necesitas la línea visual sin ningún significado especial, usa CSS text-decoration: line-through en un elemento normal.
Accesibilidad
De forma predeterminada, los lectores de pantalla no anuncian el tachado — la tecnología de asistencia lee el contenido de <s> igual que cualquier otro texto. Así, un usuario con visión verá "Was $50.00" tachado, pero un usuario de lector de pantalla puede escuchar simplemente "Was $50.00" sin ninguna indicación de que está desactualizado.
Para los casos en que el estado tachado transmite un significado importante, añade texto visualmente oculto que lo explique:
<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;
}Atributos
La etiqueta <s> admite los atributos globales y los atributos de evento. No tiene atributos propios.
Estilos
Los navegadores ya aplican text-decoration: line-through a <s>, por lo que no necesitas CSS solo para obtener la línea. Los estilos son una sobreescritura opcional — por ejemplo, para cambiar el color del texto tachado sin volver a declarar la línea:
s {
color: gray;
}