HTML del e ins: mostrar cambios y su fecha

HTML <del> marca contenido eliminado de un documento, y <ins> marca contenido insertado. Aunque su apariencia predeterminada suele ser un tachado y un subrayado, su propósito principal es transmitir el significado de un cambio; no manejan automáticamente las versiones del documento ni guardan un historial de edición.

Ejemplo completo: mostrar contenido eliminado e insertado juntos

El siguiente anuncio de horario es un ejemplo de práctica. Guárdalo como changes.html y ábrelo en un navegador para ver tanto los valores antiguos como los nuevos. La fecha y la razón también aparecen en texto visible para que los lectores puedan entender el cambio incluso cuando los colores o las líneas sean difíciles de distinguir.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ejemplo de cambio de horario</title>
</head>
<body>
  <h1>Reunión de práctica: cambio de horario</h1>
  <p>Hora de inicio:
    <del datetime="2026-10-30" cite="#reason">10:00</del>
    <ins datetime="2026-10-30" cite="#reason">11:00</ins>
  </p>
  <p>La hora de inicio anterior era las 10:00; la nueva es las 11:00.</p>
  <p id="reason">El 30 de octubre de 2026 se cambió el horario para disponer de más tiempo de preparación.</p>
</body>
</html>

Con los estilos predeterminados típicos, 10:00 tiene una línea tachada y 11:00 tiene un subrayado. CSS puede cambiar su apariencia. Aplicar del no borra el texto original de los datos, así que no lo uses para ocultar contraseñas, información personal u otro contenido que no deba ser público.

Función de los atributos datetime y cite

El atributo opcional datetime registra la fecha, o la fecha y hora, en que se realizó el cambio. El 2026-10-30 del ejemplo es una fecha en formato año-mes-día. Si necesitas una hora precisa, puedes incluir un desfase horario explícito, como en 2026-10-30T09:00:00+09:00. Agregar una fecha no programa una publicación ni hace que el documento cambie automáticamente en ese momento.

El atributo cite especifica la URL de un recurso que explica el cambio. El ejemplo usa #reason para señalar un párrafo explicativo en el mismo documento. El atributo no muestra automáticamente una explicación ni un enlace clicable, así que incluye cualquier razón necesaria y la fecha también en el texto visible.

Distinguir las ediciones del documento de las líneas decorativas

Utiliza del y ins para representar ediciones en un documento. Para un tachado en información que ya no es precisa o relevante, también considera el significado de <s>. Usa CSS text-decoration para líneas puramente decorativas. Una apariencia visual idéntica no implica un significado idéntico.

Los lectores de pantalla pueden no anunciar cada límite de eliminación o inserción con sus configuraciones predeterminadas. Para un cambio importante, explica los valores antiguos y nuevos en una oración, como lo hace el ejemplo. No distingas los dos estados solo por color, y declara claramente qué información es actualmente válida. Las referencias de del en MDN y de ins en MDN describen los elementos y sus atributos.