Referencia de etiquetas

Etiqueta del en HTML: contenido eliminado y cambios

La etiqueta <del> en HTML identifica contenido eliminado en una revisión del documento. Úsala para mostrar qué decía una versión anterior de un aviso, un horario o un texto corregido. El contenido se conserva para poder comparar el cambio; normalmente el navegador lo presenta tachado.

<p>La reunión será el <del datetime="2026-10-03">lunes</del> <ins>martes</ins>.</p>

El resultado muestra la frase con «lunes» marcado como eliminado y «martes» como insertado mediante <ins>, que suele aparecer subrayado. La fecha indica cuándo se hizo la revisión, no cuándo será la reunión. Estos atributos no añaden una fecha visible.

Sintaxis y contexto válido

Escribe <del>Contenido eliminado</del>: tanto la apertura como el cierre deben estar presentes. El elemento pertenece al contenido de frase y de flujo, y su modelo de contenido es transparente: lo que envuelve debe cumplir las reglas del contexto donde se encuentra.

Dentro de un <p>, puede abarcar palabras, enlaces o énfasis, pero no un nuevo párrafo. En un contenedor que admita bloques, como <div>, puede envolver un párrafo completo:

<div>
  <del datetime="2026-10-03">
    <p>La sala permanecerá cerrada todo el mes.</p>
  </del>
  <p>La sala abrirá de martes a sábado.</p>
</div>

No empieces un cambio a mitad de un párrafo para terminarlo a mitad del siguiente. Marca cada párrafo con <p> y usa un <del> distinto para cada fragmento eliminado. Tampoco coloques <del> directamente bajo <ul> para envolver un <li>: introdúcelo dentro del <li>. La transparencia no permite saltarse las reglas de listas o tablas. El estándar de <del> y las modificaciones entre párrafos explica estas restricciones.

Diferencia entre del y s

Elige según el significado del cambio:

<del> documenta una eliminación editorial: un aviso decía «lunes» y se corrigió a «martes».
<s> señala información que dejó de ser exacta o pertinente: una tarifa anterior que se conserva junto al precio actual.

Ambos suelen verse tachados, pero no expresan lo mismo. Un descuento no necesita convertirse en un historial de edición. Para una decoración sin significado de eliminación o pérdida de vigencia, utiliza CSS sobre el elemento adecuado. La definición normativa de <s> establece esa diferencia.

Ejemplo práctico: revisar el horario de una biblioteca

Guarda el siguiente documento como horario.html con codificación UTF-8 y ábrelo en el navegador. Incluye toda la demostración: no necesita servidor, archivos adicionales, CSS ni JavaScript.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Actualización del horario de la biblioteca</title>
  </head>
  <body>
    <h1>Horario de la biblioteca</h1>
    <p>
      Horario anterior:
      <del cite="#nota-actualizacion" datetime="2026-10-03">de 9:00 a 17:00</del>.
      Horario vigente:
      <ins cite="#nota-actualizacion" datetime="2026-10-03">de 10:00 a 18:00</ins>.
    </p>
    <p id="nota-actualizacion">
      Actualización del <time datetime="2026-10-03">3 de octubre de 2026</time>:
      se retrasa una hora la apertura y el cierre para adaptar el servicio
      al horario de las actividades de la tarde.
    </p>
    <p>El horario vigente es de 10:00 a 18:00.</p>
  </body>
</html>

Comprueba que el horario anterior aparece tachado y el vigente, normalmente subrayado. Las palabras «anterior» y «vigente» permiten entender la comparación incluso sin esas decoraciones.
Lee la nota: muestra la fecha y el motivo. cite="#nota-actualizacion" apunta a esa explicación dentro del mismo archivo, pero no crea un enlace que el usuario pueda pulsar. datetime tampoco escribe la nota.
Cambia el texto dentro de <ins>: modificarás el horario que se presenta como vigente. Si retiras solo las etiquetas de <del>, conservando su texto, el horario anterior seguirá apareciendo, pero perderá el significado de eliminación y su tachado habitual.

Para probar el ejemplo mínimo, sustituye el contenido del <body> por su único párrafo. Para probar el ejemplo de bloque, sustitúyelo por el <div> completo. Reduce la ventana y desactiva JavaScript: la información debe seguir disponible en el mismo orden.

Atributos para documentar el cambio

<del> comparte dos atributos específicos con <ins>. Ambos son opcionales:

Atributo	Qué expresa	Valor válido de ejemplo
`cite`	URL de un documento o una parte del documento que explica la revisión.	`#nota-actualizacion`
`datetime`	Fecha y, opcionalmente, hora de la modificación.	`2026-10-03`

Para datetime, escribe una fecha válida con año, mes y día, como 2026-10-03. Si incluyes hora, indica también la zona: 2026-10-03T14:30:00-06:00 o 2026-10-03T20:30:00Z representan el mismo instante. 03/10/2026, «ayer» y una hora aislada no cumplen el formato requerido. Consulta la sintaxis normativa de fecha con hora opcional.

cite no es el elemento <cite>, que identifica el título de una obra. Si necesitas un enlace visible a una explicación, añade un <a href="…"> real cuyo destino exista. Los atributos comunes de las modificaciones no generan un registro automático: debes mantener tú las versiones, las notas y sus fechas.

También admite atributos globales, como id, class y lang. text-decoration es una propiedad CSS para la apariencia; dateTime, con T mayúscula, es una propiedad DOM que JavaScript puede consultar. Ninguna sustituye el significado del elemento.

Accesibilidad, errores y preguntas frecuentes

No comuniques el cambio exclusivamente con tachado, subrayado o color. La referencia de accesibilidad de MDN advierte que muchos lectores de pantalla no anuncian <del> en su configuración habitual. El ejemplo práctico incluye etiquetas visibles, una explicación y el horario vigente expresado por separado. <del> no es un control y no necesita tabindex para funcionar.

¿Del borra realmente el texto? No. Sigue en el documento y puede leerse, copiarse o consultarse en el código fuente. Para retirar información de una publicación, elimina también su contenido; marcarlo con <del> no lo oculta.

¿Datetime muestra la fecha al usuario? No automáticamente. Añade texto visible cuando la fecha sea relevante; <time> puede relacionar ese texto con una fecha legible por máquinas.

¿Por qué no aparece tachado? Comprueba primero que el texto está entre <del> y </del>. Después revisa en las herramientas del navegador si una regla CSS cambia text-decoration. Quitar el tachado mediante CSS no elimina la semántica; añadirlo a un <span> no convierte ese texto en una revisión.

Compatibilidad y fuentes

Compatibilidad consultada el 3 de octubre de 2026: MDN clasifica <del> como ampliamente disponible. Los ejemplos usan HTML nativo y funcionan sin JavaScript. La apariencia y el anuncio por tecnologías de asistencia pueden variar.

Usa el HTML Living Standard para comprobar significado, contexto y atributos; MDN complementa la explicación y los datos de soporte. <ins>, <s> y <time> resuelven problemas relacionados, pero cada uno conserva su función propia.