Cómo tachar texto en HTML

Aprender a tachar texto en HTML es fácil, pero seamos honestos… no es el tema más emocionante del mundo. Así que, te lo explicaré usando los peores chistes que puedas imaginar. Además, te mostraré cuándo usar <s>, <del> o CSS y cómo cada opción puede afectar la experiencia del usuario y el SEO.

Tachar palabras con la etiqueta <s>

La etiqueta <s> se utiliza para tachar texto que ya no es relevante pero que aún puede ser útil como referencia. Así pues, se suele usar para mostrar precios antiguos en descuentos o para indicar términos o datos desactualizados.

Ejemplo de código

<p>El precio antes era <s>100€</s> pero hemos tenido que subirlo</p>

Resultado

El precio antes era 100€ pero hemos tenido que subirlo

Tachar palabras con la etiqueta <del>

La etiqueta <del> indica que un texto ha sido eliminado de un documento, proporcionando un significado semántico adicional. En otras palabras, cuando quieres dejar claro que un contenido ha sido eliminado (o cambiado), o para mostrar modificaciones en ediciones de documentos.

Ejemplo de código

<p>El mejor jugador del mundo es <del>Cristiano Ronaldo</del> Messi</p>

Resultado

El mejor jugador del mundo es Cristiano Ronaldo Messi

Otras formas de tachas letras sin HTML

Si solo necesitas aplicar el efecto visual sin modificar la semántica del contenido, en mi opinión la mejor opción es CSS en lugar de HTML, a través de la propiedad text-decoration: line-through;.

Ejemplo de CSS en línea

<p style="text-decoration: line-through;">¿Te gusta el rock progresivo? Cada vez más</p>

Ejemplo con clase

<style>
.tachado {
    font-weight: line-thourgh;
  }
</style>

<p class="tachado">¿Qué hace una abeja en un gimnasio? Zumba</p>

Diferencias entre <s>, <del> y text-decoration: line-through;

Como quizá tienes ahora un pequeño cacao en la cabeza, vamos a hacer un pequeño resumen sobre las 2 formas de tachar palabras con HTML y sin él.

Método	Propósito	Afecta SEO	Mejor uso
<s>	Indica que el texto ya no es relevante pero sigue siendo visible.	No afecta directamente.	Precios antiguos, términos desactualizados.
<del>	Indica que el texto ha sido eliminado.	Puede ser interpretado por Google como una edición de contenido.	Correcciones de documentos, cambios en información.
text-decoration: line-through;	Solo aplica el efecto visual.	No tiene impacto.	Diseño sin alterar la semántica.

Buenas prácticas para el uso del tachado en HTML

Al igual que ya hice en el artículo en el que te expliqué cómo poner negrita, cursiva y subrayado en HTML, vamos a ver un par de consejos finales para su correcta aplicación:

Por último, simplemente comentar que el editor clásico de WordPress permitía tachar texto de forma sencilla. En la barra de herramientas del editor visual, había un botón con la letra S (de "Strikethrough"), que aplicaba la etiqueta <del> al texto seleccionado.

Como este botón ya no está disponible en Gutenberg puedes hacer uso del plugin de Wordpress de editor clásico por si queires tachar texto sin tocar código.