Teoría
Teoría

Las etiquetas del e ins: marcar cambios

Las listas de tareas sirven para tachar lo que ya hicimos y, de vez en cuando, agregar algo nuevo. Vamos a actualizar la nuestra de modo que se vea qué tareas terminamos y cuáles agregamos. ¿Cómo se marca ese historial de cambios?

Para representar cambios existen <del>, de «delete», y <ins>, de «insert».

La etiqueta <del> marca texto eliminado en una nueva versión del documento. El navegador suele mostrarlo tachado.

La etiqueta <ins> marca texto agregado en una nueva versión. El navegador suele mostrarlo subrayado.

Ambas tienen un atributo datetime que permite indicar cuándo se hizo el cambio.

Una lista de tareas es un ejemplo sencillo: cuando terminas una tarea, puedes marcarla con <del>. Si aparece una nueva, la agregas a la lista y la marcas con <ins>.

<ul>
  <li>Limpiar el lavavajillas</li>
  <li><del datetime="2009-10-11T01:25-07:00">Salir a caminar</del></li>
  <li><del datetime="2009-10-10T23:38-07:00">Dormir</del></li>
  <li><ins>Comprar una impresora</ins></li>
</ul>

El atributo datetime está pensado para las computadoras. Por eso su fecha y hora se escriben en un formato normalizado. Así los programas pueden analizar los documentos y saber cuándo se hicieron los cambios.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sitio de un principiante en desarrollo web</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> Inicio </nav> </header> <main> <article> <h1>Día once. Sin exagerar</h1> <p>Me di cuenta de que le daba demasiada comida al gato. Para que pueda caminar sobre la nieve sin hundirse, decidí quitar esa tarea de la lista.</p> <ol> <li>Darle de comer al gato</li> <li>Regar el cactus</li> <li>Apagar la luz</li> <li>Salir a hacer pendientes</li> </ol> </article> <aside> Tu anuncio podría estar aquí </aside> </main> <footer> Pie de página </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; } time { color: #6a2cce; }

ObjetivosRealizado

Envuelve el texto de la primera tarea de la lista en <del>.
Después de la tarea tachada, agrega otra con el texto No olvidarme de comer yo también.
Envuelve el texto de la nueva tarea en <ins>.