Teoría
Teoría

La etiqueta time: fechas y horas

En la nueva entrada queremos indicar la hora exacta a la que escribimos. O, mejor dicho, la hora de la noche. Podríamos dejarla como texto, pero hay una opción mejor: HTML tiene una etiqueta especial para fechas y horas, <time>.

Con <time> puedes representar una fecha para las personas y para las computadoras a la vez. La versión para las personas va dentro de la etiqueta; la versión para las computadoras va en el atributodatetime, con un formato normalizado como ISO 8601:

<time datetime="2016-11-18T09:54">09:54</time>

<time datetime="2015-11-18">18 nov 2015</time>

<time datetime="2018-09-23">23 sep 2018</time>

<time datetime="2017-04-20">ayer</time>

El navegador solo muestra el contenido de la etiqueta. El valor de datetime no se ve. Las personas leen una fecha comprensible y los programas obtienen el formato que necesitan. Todo el mundo sale ganando.

Agregamos algunos estilos para mejorar el aspecto de <time>. Puedes verlos en la pestaña style.css.

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 nueve. O más bien, noche</h1> 03:00 <p>Me desperté de golpe esta noche, porque tuve una pesadilla: ¿y si ya nadie necesita a quienes crean páginas web y pronto los robots lo hacen todo?</p> <p>«Qué maravillosa idea», pensé. Me di la vuelta y volví a dormirme.</p> </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 03:00 en <time>.
Envuelve el texto esta noche en <time>.
Agrega al primer <time> el atributo datetime con el valor 2018-11-27T03:00.
Agrega al segundo <time> el atributo datetime con el valor 2018-11-27.