HTML: Fechas

El elemento <time> se utiliza para representar un período específico de tiempo. De forma opcional, se puede usar el atributo datetime para aportar una versión informativa más sencilla de manejar para ciertos programas, sin tener que procesar la información con el fin de normalizarla.

Este elemento también hace uso de dos etiquetas: <time> (de apertura) y </time> (de cierre). Puede representar el contenido en estos formatos:

  • La hora en formato de 24 horas.
  • Una fecha exacta del calendario gregoriano.
  • Una duración de período válido.

Representar meses

Los meses se representan empezando con el año en cuestión en números, seguido de un guión (-) y finalmente el número del mes. Ejemplos:

<time>2022-01</time>
<time>2022-02</time>
<time>2022-03</time>

Representar fechas

Las fechas se representan empezando también con el año en números, seguido de un guión (-), el número del es, otro guión (-) y finalmente el número del día. Se trata de la fecha en formato ISO (ISO 8601). Algunos ejemplos:

<time>2022-01-30</time>
<time>2022-02-18</time>
<time>2022-03-14</time>

Representar horas

Hay muchas maneras de representar la hora, dependiendo del grado de precisión que necesitemos. Se utiliza dos dígitos para representar la hora (entre 00 y 23), dos dígitos para los minutos (entre 00 y 59) y dos dígitos para los segundos (entre 00 y 59), todos ellos separados por el signo de los dos puntos (:).

Como mínimo debe introducirse la hora y los minutos; los segundos son opcionales. Si se desea, se puede incluso introducir la parte decimal de los segundos hasta un total de tres dígitos, usando el punto como separador decimal (.). Ejemplos:

<time>21:35</time>
<time>21:35:48</time>
<time>21:35:48.178</time>

Representar fecha y hora

Es posible representar la fecha y la hora a la vez. Es tan fácil como introducir primero la fecha en formato ISO (ISO 8601) y luego la hora, separados por un espacio ( ) o por la letra “T” mayúscula (T). Ejemplos:

<time>2022-01-30 21:35</time>
<time>2022-02-18 21:35:48</time>
<time>2022-03-14 21:35:48.178</time>

Representar zonas horarias

Las zonas horarias se representan de la siguiente manera: si es un desplazamiento negativo se empieza con el signo menos (-) y si es un desplazamiento positivo se usa el signo más (+). Se completa con dos dígitos de las horas, los dos puntos (:) y los dos dígitos de los minutos. Ejemplos:

<time>+07:25</time>
<time>-03:40</time>

Representar fecha y hora global

Existe dos maneras para representar una fecha y hora global. El método que quizá nos será más cómod es usando una combinación de la fecha en formato ISO (ISO 8601), un espacio o la letra “T” mayúscula, la hora local y la zona horaria.

<time>2022-02-18 21:35:48+07:25</time>
<time>2022-03-14 21:35:48-03:40</time>

El otro método es introduciendo la hora global normalizada a UTC. En este caso, usaremos la fecha (año, mes y día) convertida a la zona horaria UTC, la letra “T” mayúscula (T), la hora convertida a la zona horaria UTC y finalmente introduciremos la letra “Z” mayúscula (Z). Ejemplos:

<time>2022-02-18T21:35:48Z</time>
<time>2022-03-14T21:35:48Z</time>

Representar semanas

Alternativamente a los ejemplos ya comentados, si se desea se puede representar las semanas. La sintaxis de este caso es tan fácil como introducir primero los dígitos del año, seguido de un guión (-), la letra “W” mayúscula (W) y finalmente los dos dígitos de la semana (entre 1 y 52). Por ejemplo:

<time>2022-15</time>
<time>2022-43</time>

Tal y como se puede ver, el elemento <time> ofrece muchas posibilidades en el tratamiento de la fecha y la hora. Es habitual encontrar que contiene una fecha o una hora simplificadas con el valor completo dentro del atributo datetime. La forma de usarlo dependerá de las necesidades de cada autor.

← Artículo anterior
Artículo siguiente →