Etiqueta HTML <del>
La etiqueta <del> marca texto eliminado de un documento. Conoce sus atributos cite y datetime, su uso con <ins> y accesibilidad.
La etiqueta <del> marca un fragmento de texto que fue eliminado de un documento. Es un elemento semántico: no solo tacha el texto, sino que registra que el contenido fue retirado intencionalmente como parte de una edición. Los navegadores lo renderizan con tachado por defecto, pero el significado reside en el marcado, no en el estilo.
Usa <del> siempre que quieras mostrar un historial de cambios, por ejemplo:
- Ediciones rastreadas — conservar la redacción original visible mientras se muestra que fue eliminada (registros de cambios, wikis, documentos colaborativos).
- Reducciones de precio — tachar el precio anterior y mostrar el nuevo junto a él.
- Correcciones — preservar un error en el registro (una corrección publicada) en lugar de eliminarlo silenciosamente.
<del> casi siempre se combina con la etiqueta <ins>, que marca texto recién insertado y aparece subrayado por defecto. Juntos expresan "esto fue reemplazado por aquello."
Cuándo NO usar <del>
Si solo quieres un efecto de tachado sin el significado de "esto fue editado", <del> no es la herramienta adecuada:
- Para contenido que ya no es preciso o relevante (pero no fue eliminado en una edición) — como un producto agotado o una oferta vencida — usa la etiqueta
<s>. - Para un tachado puramente visual sin intención semántica, usa la propiedad CSS text-decoration con el valor
line-through.text-decoration: line-throughes presentacional y las tecnologías de asistencia lo ignoran, mientras que<del>les transmite significado.
En resumen: recurre a <del> cuando el tachado signifique "eliminado en una edición", y recurre a CSS cuando solo necesitas la línea.
Puedes aplicar estilos a un elemento <del> libremente con CSS — por ejemplo, cambiar su color o reemplazar el tachado predeterminado — sin perder su significado, porque la semántica vive en la etiqueta, no en el estilo.
Accesibilidad
Los lectores de pantalla no tratan <del> de la misma manera. Por defecto, NVDA y JAWS generalmente leen el texto eliminado de forma continua como cualquier otro texto y no anuncian que fue eliminado a menos que el usuario active la configuración de verbosidad correspondiente — así que un usuario con visión ve el tachado mientras que un usuario de lector de pantalla puede no escuchar nada sobre la edición.
Cuando la eliminación en sí es importante para comprender el contenido (por ejemplo, la diferencia entre un precio antiguo y uno nuevo), añade una indicación explícita en lugar de depender de la línea visual:
<p>
Price:
<del><span class="visually-hidden">Old price: </span>$99</del>
<ins><span class="visually-hidden">New price: </span>$79</ins>
</p>Evita intentar inyectar texto "eliminado" mediante la propiedad CSS content — el contenido generado se expone de manera inconsistente a las tecnologías de asistencia. Prefiere texto visible, un aria-label o aria-describedby en el elemento cuando se necesite contexto adicional.
Sintaxis
La etiqueta <del> se usa en pares. El contenido se escribe entre las etiquetas de apertura (<del>) y cierre (</del>).
Ejemplo de la etiqueta HTML <del>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My favorite color is <del>green</del> <ins>blue</ins>!</p>
</body>
</html>Ejemplo real: una reducción de precio
El uso más frecuente de <del> combinado con <ins> es mostrar un precio antiguo junto a uno nuevo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Special offer: <del>$99</del> <ins>$79</ins></p>
</body>
</html>El precio anterior permanece en la página (tachado) y el nuevo precio está marcado como insertado, de modo que tanto el resultado visual como el marcado cuentan la misma historia.
Ejemplo de la etiqueta HTML <del> con el atributo cite
El atributo cite contiene una URL que apunta a un documento que explica por qué se cambió el texto — una entrada de registro de cambios, un diff o un enlace a un rastreador de incidencias, no el contenido eliminado en sí:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
The release date is
<del cite="https://example.com/changelog#2023-10-25">October 25</del>
<ins cite="https://example.com/changelog#2023-11-02">November 2</ins>.
</p>
</body>
</html>Ejemplo de la etiqueta HTML <del> con el atributo datetime
El atributo datetime registra cuándo ocurrió la eliminación en formato legible por máquina:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The <del datetime="2023-10-25T14:30:00Z">old text</del> was replaced with new content.</p>
</body>
</html>El formato de datetime
El valor de datetime sigue el formato YYYY-MM-DDThh:mm:ssTZD:
YYYY-MM-DD— la fecha (año, mes, día). Esta parte es obligatoria.T— un separador literal entre la fecha y la hora.hh:mm:ss— la hora. La parte de la hora completa es opcional — una fecha simple es válida.TZD— el Designador de Zona Horaria:Zpara UTC, o un desplazamiento como+02:00/-05:00.
Valores válidos:
2023-10-25 <!-- date only -->
2023-10-25T14:30 <!-- date + time, no seconds -->
2023-10-25T14:30:00Z <!-- UTC -->
2023-10-25T14:30:00+02:00 <!-- with a time-zone offset -->Valores no válidos:
25-10-2023 <!-- wrong order; must be YYYY-MM-DD -->
2023/10/25 <!-- wrong separators; must use hyphens -->
2023-10-25 14:30:00 <!-- space instead of the "T" separator -->Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| cite | URL | URL de un documento (registro de cambios, diff, incidencia) que explica por qué el texto fue editado o eliminado. |
| datetime | YYYY-MM-DDThh:mm:ssTZD | La fecha (y hora opcional) en que el texto fue eliminado. |
La etiqueta <del> también usa los Atributos Globales y los Atributos de Evento.
Etiquetas relacionadas
<ins>— marca texto insertado; el complemento natural de<del>.<s>— marca texto que ya no es preciso o relevante (no eliminado en una edición).