Artículos
HTML5

Fechas en HTML5

Creado: 09/Oct/2012 Actualizado: 09/Ene/2025

Hay múltiples motivos por los que tenemos que añadir fechas a nuestras páginas web, desde el típico de indicar cuándo fue creada o modificada la página, para reseñar la fecha de publicación de un artículo, para poner la fecha de un comentario, reseñar un acontecimiento,…

Es por ello que, después de muchas discusiones, eliminar las fechas de la especificación HTML5 y volverlas a aceptar (en inglés), tenemos el elemento time para poder especificar fechas en HTML5.

El elemento time en HTML5 tiene la siguiente estructura.

<time datetime="fechaISO">fecha a mostrar</time>

Así una fecha en HTML5 se podría definir de la siguiente forma:

<time>8 de octubre de 2012</time>

Ya que el atributo datetime no es estrictamente necesario, pero muy aconsejable si queremos tener un formato entendible por máquinas. Y es que el atributo datetime nos permite especificar la fecha en un formato ISO 8601.

Así, si insertamos la fecha con el atributo datetime tendríamos lo siguiente:

<time datetime="2012-10-08">8 de octubre de 2012</time>

Pero la fecha no se tiene que restringir al formato año mes día. Por ejemplo, podemos temer fechas más cortas, en las que solo especifiquemos el año:

<time datetime="2012">Año 2012</time>

En las que especifiquemos la hora…

<time datetime="12:00">Las 12 horas</time>

En las que especifiquemos la fecha y la hora (en este caso la fecha y hora se separa mediante una T o con un espacio en blanco):

<time datetime="2012-10-08T12:00">12h del 8 de octubre de 2012</time>

En las que demos incluso la zona horaria GTM (o UTC para ser exactos). En este caso entre la hora y la franja horaria hay que añadir el desplazamiento positivo (con un más) o negativo (con un menos) que tenga esa zona:

<time datetime="2012-10-08T12:00-07:00">12h del 8 de octubre de 2012 en UTC -07</time>(San Francisco)

Como hemos podido comprobar, el manejo del elemento time y de su atributo datetime es realmente sencillo para poder fechas en HTML5.

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
4 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios