La Etiqueta S

Se utiliza para tachar texto, indicando que el contenido está obsoleto, desactualizado o ya no es relevante, pero sin implicar que ha sido eliminado.

La etiqueta <s> en HTML se utiliza para tachar texto, indicando que el contenido está obsoleto, desactualizado o ya no es relevante, pero sin implicar que ha sido eliminado (para eso se usa <del>). Es una herramienta útil para mostrar cambios en precios, promociones finalizadas o correcciones en documentos. A continuación, te explicamos cómo implementarla correctamente.

Sintaxis básica

La estructura básica es:

<s>Texto tachado aquí</s>

Ejemplo:

<p>
   Precio original: <s>$200</s> ¡Ahora $150!
</p>

Resultado:

Precio original: 200¡Ahora200¡Ahora150!

El navegador aplica un estilo CSS por defecto (text-decoration: line-through).

Diferencias clave entre <s>, <del> y <strike>

Etiqueta Propósito Estado en HTML5
<s> Marcar texto como obsoleto o no relevante (sin indicar eliminación). Válida.
<del> Indicar que el texto fue eliminado (por ejemplo, en documentos editables). Válida.
<strike> Tachar texto (similar a <s>). Obsoleta. No usar.

Ejemplo con <del>:

<p>
   Versión anterior: <del>Texto eliminado</del>. Nueva versión: Texto actualizado.
</p>

Personalización con CSS

Puedes modificar el estilo del tachado:

CSS:

s {
  text-decoration-color: red;       /* Color del tachado */
  text-decoration-thickness: 2px;   /* Grosor de la línea */
  color: #888;                      /* Color del texto */
}

HTML:

<s style="text-decoration: line-through wavy blue; color: #666;">
   Oferta expirada
</s>

Resultado:

Oferta expirada

Casos de uso comunes

a) Precios desactualizados

<p>
   <s>$500</s> $299 en oferta limitada.
</p>

b) Texto corregido

<p>
   La capital de Francia es <s>Londres</s> París.
</p>

c) Promociones finalizadas

<p>
   <s>¡2x1 en cafés hasta el 30 de abril!</s> (Oferta cerrada).
</p>

Accesibilidad y buenas prácticas

Semántica: <s> no tiene un significado fuerte para lectores de pantalla, pero ayuda visualmente a los usuarios.

No abuses: Úsala solo cuando el texto tachado aporte contexto (ejemplo: comparar precios).

Alternativas: Si el texto fue eliminado o reemplazado, prefiere <del> y <ins>:

<p>
   <del>Versión antigua</del> <ins>Nueva versión</ins>.
</p>

Ejemplo completo

<!DOCTYPE html>
<html>
<head>
  <style>
    .oferta {
      font-size: 18px;
      color: #333;
    }
    s {
      text-decoration: line-through red;
      margin-right: 10px;
    }
    .nuevo-precio {
      color: #2ecc71;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h2>Ofertas del día</h2>
  <div class="oferta">
    <s>$1200</s> 
    <span class="nuevo-precio">$899</span> 
    - Laptop Gamer
  </div>
  <div class="oferta">
    <s>$300</s> 
    <span class="nuevo-precio">$199</span> 
    - Smartwatch
  </div>
</body>
</html>

Combinación con otras etiquetas

Puedes anidar <s> con elementos como <strong> o <em>:

<p>
   <s><strong>¡Atención!</strong> Este evento fue cancelado</s>.
</p>

Resultado:

¡Atención! Este evento fue cancelado.

Conclusión

La etiqueta <s> es una herramienta sencilla pero efectiva para comunicar cambios o desactualizaciones en tu contenido. Al usarla correctamente, mejoras la claridad visual y mantienes una semántica adecuada. ¡Inclúyela en tu toolkit de HTML para destacar información relevante de forma intuitiva!