Jugando con el tiempo: el elemento time
Hay múltiples motivos por los que en alguna ocasión es necesario añadir fechas a nuestra página web. Desde la típica fecha para indicar la creación o modificación de un post o artículo, pasando por la fecha de un comentario o para indicar el comienzo de un evento o acontecimiento. En todos estos casos lo lógico es usar una fecha lo más legible posible de cara al usuario, ¿pero qué pasa con las máquinas?.
Si tenemos en cuenta los buscadores u otros tipos de programas que también pueden valerse de estas fechas, tenemos un serio problema, y es que los formatos que generalmente usamos de cara al usuario no son válidos para máquinas. Para ellas se crearon diez tipos de formatos de fechas diferentes, todas ellas en su mayoría numéricas y nada amigables de cara al usuario. Siendo así, ¿por quién nos decantamos, por la máquina o por el usuario?.
Para mí la respuesta es bien sencilla, siempre hay que decantarse por el usuario, a fin de cuentas escribimos para él. Pero para evitarnos rompederos de cabeza HTML5 nos da la etiqueta time que viene a solucionar este y otros embrollos con los formatos de las fechas.
El elemento time
El elemento time fue introducido por primera vez en la especificación de HTML5 en 2009, sin embargo fue eliminado en favor de data en 2011. Nuevamente volvió a ser reintroducido, pero en esta ocasión mejorado para permitir mas formatos de fecha/hora.
El elemento time es un elemento en linea, como bien puede ser span o img y al igual que estos dos tiene etiqueta de cierre. Representa una fecha y/u hora en el calendario Gregoriano y cuando se usa en su forma simple el contenido de este elemento debe ser un formato válido de fecha y/u hora. Es además uno de los nuevos elementos semánticos de HTML5. Aquí debajo te dejo un ejemplo:
<!-- 27 de Febrero de 2016 --!>
<time>2016-02-27</time>
El atributo datetime
Cuando usamos fechas de cara al usuario es evidente que el formato que usamos en el ejemplo anterior no es el más apropiado (sin obviar que cada cultura o región escribe las fechas de forma diferente), sin embargo y según la especificación de la W3C, si usamos la forma simple debe ser uno de estos formatos válidos para máquina el que necesariamente usemos, salvo que incluyamos el atributo datetime y pasemos a una forma más compleja.
El atributo datetime (que es opcional) viene a solucionarnos este problema, ya que es él quien contendrá la información en formato legible para la máquina, mientras que el elemento time contendrá la fecha y/u hora en formato legible para el usuario. Si usamos el ejemplo anterior nos quedaría de la siguiente forma:
<!-- 27 de Febrero de 2016 --!>
<time datetime="2016-02-27">27 de Febrero de 2016</time>
Formatos de fecha/hora para máquina
Bien cuando usamos la forma abreviada o cuando usamos la forma compleja con datetime, necesitamos usar alguno de los diez formatos válidos que la especificación permite para el elemento time.
Año y mes
2016-02
Muy sencillo, primero el año y después el mes
Fecha
2016-02-27
Parecido al anterior, también muy simple. Primero el año, luego el mes y por último el día
Fecha sin año
02-27
El mes primero que el día
Sólo la hora
14:52:37.257
Horas, minutos y segundos. Los segundos son opcionales y se pueden usar hasta tres dígitos para representar las fracciones de segundo.
Fecha y hora
2016-02-27T14:52:37
Combinación de fecha y hora, separadas por una T siempre mayúscula.
Zona horaria
+01:00
Comienza con un signo más o un signo menos. Los dos puntos (:) son opcionales. Si la zona horaria a representar es +00:00 se puede cambiar por una Z mayúscula.
Fecha y hora local
2016-02-27T14:52:37+01:00
Igual que el formato fecha y hora pero añadiéndole la zona horaria.
Para representar una semana
2016-W09
Primero el año seguido de una W en mayúscula y el número de semana correspondiente.
Para representar una duración
P3DT4H5M34.035S 3d 4h 5m 34.035s
En esta caso hay dos formatos posibles. En el primero comenzamos con una P mayúscula seguido de un valor para el día, que es opcional, y seguido de una T, también mayúscula. A continuación van los valores opcionales de horas, minutos y segundos. Todas las letras deben de ir en mayúscula.
El segundo formato es más sencillo. Horas, minutos y segundos. Las letras pueden ir tanto en mayúsculas como en minúsculas y los espacios son opcionales. También podemos usar semanas, con la correspondiente letra w.
Ventajas de usar time
A estas alturas creo que son bastante visibles las ventajas de usar este elemento semántico de HTML5. El tener la posibilidad de dar la fecha en dos formatos, uno para máquina y otro para el usuario, es una gran ventaja, por ejemplo para un evento global donde queremos que la fecha de cara al usuario se muestre según en la región en que se encuentre, posibilitando que la fecha sea más legible.
El hecho de dar una fecha válida en formato para máquina, ayuda a los buscadores a posicionar noticias muy sensibles en cuanto a la fecha, para no dar resultados que puedan dar lugar a equivocaciones, como noticias sobre terremotos, huracanes o alertas de carácter sensible a la población civil.