Elemento time

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento time representa fechas, horas, desplazamientos de zonas horarias y duraciones. Adicionalmente, una versión específica para programas de los contenidos del elemento puede ser provista en el atributo datetime.

Aunque la presencia del atributo datetime no es obligatoria, ésta puede ser útil para brindar una versión de los contenidos del elemento más sencilla de manejar para los programas, que no requiere la alteración de éstos.

Si el elemento time es declarado sin el atributo datetime, éste no puede tener ningún elemento como descendiente.

Las posibles variantes de la versión para programas que el atributo datetime puede proveer deben coincidir con cualquiera de las sintaxis descriptas debajo.

Meses

La sintaxis de un mes está compuesta por:

  1. Un año mayor que cero, compuesto por, al menos, cuatro dígitos.
  2. Un signo menos o guión ("-").
  3. Un mes entre 1 y 12, compuesto de dos dígitos.

Ejemplo

<time>2014-07</time>
<time>0512-12</time>

Fechas

La sintaxis de una fecha está compuesta por:

  1. Una sintaxis válida de mes representando un año y un mes.
  2. Un signo menos o guión ("-").
  3. Un día de dos dígitos entre 1 y el número de días del mes y año previamente especificados.

Ejemplo

<time>2014-07-05</time>
<time>1920-12-31</time>

Fechas sin año

La sintaxis de una fecha sin año está compuesta por:

  1. Opcionalmente, dos signos menos o guiones ("-").
  2. Un mes entre 1 y 12, compuesto por dos dígitos.
  3. Un signo menos o guión ("-").
  4. Un día de dos dígitos entre 1 y el número de días para el mes especificado previamente en un año biciesto.

Ejemplo

<time>02-29</time>
<time>--10-20</time>

Horas

La sintaxis de una hora está compuesta por:

  1. Dos dígitos representando una hora entre 0 y 23.
  2. Un carácter de dos puntos (":").
  3. Un minuto de dos dígitos entre 0 y 59.
  4. La siguiente información, que es opcional si el número de segundos es cero:
    1. Un carácter de dos puntos (":").
    2. Dos dígitos representando la parte entera de los segundos, entre 0 y 59.
    3. La siguiente información, que es opcional si el número de segundos es entero:
      1. Un punto (".").
      2. La parte fraccionaria de los segundos compuesta por uno, dos o tres dígitos.

Ejemplo

<time>23:59:59.999</time>
<time>10:20:00.000</time>
<time>10:20</time>
<time>10:20:00</time>

Fecha y hora locales

La sintaxis de una fecha y hora local está compuesta por:

  1. Una sintaxis válida de fecha representando año, mes y día.
  2. Una letra T mayúscula o un carácter de espacio (" ").
  3. Una sintaxis válida de hora representando la hora. Note: en una cadena de fecha y hora local normalizada, solo la variante más corta puede ser utilizada en este punto (por ejemplo, con la omisión del número de segundos cuando es cero).

Ejemplo

<time>2014-10-29 23:59:59.999</time>
<time>1999-12-03 10:20:00.000</time>
<time>2000-12-15T10:20</time>
<time>1823-01-02T10:53:12.2</time>

La sintaxis de una fecha y hora local está compuesta por:

  1. Una sintaxis válida de fecha representando año, mes y día.
  2. Una letra T mayúscula.
  3. Una sintaxis válida de hora representando la hora. Note: en una cadena de fecha y hora local normalizada, solo la variante más corta puede ser utilizada en este punto (por ejemplo, con la omisión del número de segundos cuando es cero).

Ejemplo

<time>2001-01-01T00:00</time>
<time>1984-01-01T00:25:32.25</time>

Las fecha y hora locales son útiles cuando los autores necesitan especificar un momento en el tiempo que no depende de la información de la zona horaria. Algunos ejemplos de uso pueden ser documentos dirigidos a audiencias de una zona horaria en particular, o eventos que acontecen a la misma hora en cualquier zona horaria, como el comienzo de un nuevo día, que ocurre a las 00:00 hs siempre.

Zonas horarias

La sintaxis de una zona horaria está compuesta por:

  1. Un signo menos o guión ("-") si el desplazamiento es negativo, y un signo más ("-") en caso contrario.
  2. Dos dígitos representando una hora entre 0 y 23.
  3. Opcionalmente, un carácter de dos puntos (":").
  4. Un minuto de dos dígitos entre 0 y 59.

Ejemplo

<time>-12:00</time>
<time>+00:00</time>
<time>+00:30</time>
<time>-1100</time>

Este formato permite un rango de zonas horarias más amplio de los que actualmente se utiliza en la práctica. La razón de este exceso es mejorar la adaptabilidad a futuros cambios en las zonas horarias, Ya que éstos están sujetos a decisiones políticas.

Fecha y hora globales

La sintaxis de una fecha y hora global está compuesta por:

  1. Una sintaxis válida de fecha representando año, mes y día.
  2. Una letra T mayúscula o un carácter de espacio (" ").
  3. Una sintaxis válida de hora representando la hora.
  4. Una sintaxis válida de zona horaria representando el desplazamiento de zona horaria.

Ejemplo

<time>2014-01-14 00:12-03:00</time>
<time>2014-05-16T20:12+00:30</time>
<time>2201-08-20 03:04:22.5-5:00</time>
<time>2000-04-01T02:00:00.00+4:00</time>

Para que una fecha y hora global sea una cadena de fecha y hora global normalizada a UTC, debe estar compuesta por:

  1. Una sintaxis válida de fecha representando año, mes y día, convertida a la zona horaria UTC.
  2. Una letra T mayúscula.
  3. Una sintaxis válida de hora representando la hora, convertida a la zona horaria UTC y en su variante más corta (por ejemplo, con la omisión del número de segundos cuando es cero).
  4. Una letra Z mayúscula.

Ejemplo

<time>2014-02-03T22:00Z</time>
<time>2010-01-01T00:00:00.001Z</time>
<time>2050-01-03T23:59Z</time>
<time>1980-12-23T00:05Z</time>

Semanas

La syntaxis de una semana está compuesta por:

  1. Un año-semana (apenas diferente a los años regulares, delimitado por los límites de las semanas) mayor a cero, compuesto por, al menos, cuatro dígitos.
  2. Un signo menos o guión ("-").
  3. Una letra W mayúscula.
  4. Dos dígitos representando el número de semana, entre 1 y el número máximo de semanas presente en este año particular, siendo bien 52 o 53.

Una semana en este modelo es considerada como el período de siete días que comienza un Lunes. La primera semana de un año es la que tiene el primer Jueves.

Ejemplo

<time>1986-W03</time>
<time>2014-W52</time>

Períodos

La sintaxis de un período está compuesta por:

  1. Una letra P mayúscula.
  2. Cualquiera de las siguientes componentes de período, en este orden:
    1. Al menos un dígito representando el número de días, seguido po una letra D mayúscula.
    2. Opcionalmente una letra capital T seguida por cualquiera de las componentes de período descritas a continuación:
      1. Uno o más dígitos representando el número de horas, seguido por una letra H mayúscula.
      2. Uno o más dígitos representando el número de minutos, seguido por una letra M mayúscula.
      3. El siguiente componente:
        1. Al menos un dígito representando el número de segundos.
        2. Opcionalmente un punto ("."), seguido por la parte fraccionaria de los segundos compuesta por uno, dos o tres dígitos.
        3. Una letra S mayúscula.

En favor de la legibilidad, se pueden agregar espacios dentro de cualquier componente de duración, excepto entre los dígitos que componen los números.

Ejemplo

<time>P 25D</time>
<time>P 2D T 20H 5M 32.215S</time>
<time>PT 2H 5M</time>
<time>PT 22H 5.2S</time>

Ejemplos

En el siguiente ejemplo, un par de oraciones proveen fechas de manera informal, ambas acompañadas por sus versiones para programas en el atributo datetime.

<p>Nos casamos <time datetime="1982-10-06">el 6 de Octubre, allá por 1982</time>. <time datetime="1982-11-06">Un mes más tarde</time> supimos que Brian estaba en camino.</p>

Nos casamos . supimos que Brian estaba en camino.

El segundo ejemplo muestra un fragmento de una noticia con la fecha de publicación en su pie. Como anteriormente, la fecha es provista informalmente pero con una muy precisa versión en el atributo datetime, posiblemente pensada para interacciones con programas.

<article>
  <h1>La mayoría de los refugiados están en ciudades, no en campamentos</h1>
  <p>Desde que se han incrementado las crisis humanitarias, por las diferentes guerras y conflictos en el mundo, el Comité Internacional para Refugiados (International Rescue Committee, IRC, en sus siglas en inglés), tiene el desafío de lograr atender al mayor número de desplazados, cifra que se ha triplicado con 60 millones de personas, el mayor incremento desde la Segunda Guerra Mundial...</p>
  <footer>Publicado <time datetime="22-10-2014">una semana atrás</time>.</footer>
</article>

La mayoría de los refugiados están en ciudades, no en campamentos

Desde que se han incrementado las crisis humanitarias, por las diferentes guerras y conflictos en el mundo, el Comité Internacional para Refugiados (International Rescue Committee, IRC, en sus siglas en inglés), tiene el desafío de lograr atender al mayor número de desplazados, cifra que se ha triplicado con 60 millones de personas, el mayor incremento desde la Segunda Guerra Mundial...

Publicado .

En este último ejemplo, el atributo datetime se encuentra ausente, y los contenidos del elemento time son la única versión de la fecha que éste representa. Queda claro como en este caso, los contenidos del elemento concuerdan con los requerimientos para las fechas en versiones para programas, y que la presencia del atributo datetime sería redundante.

<h1>Michael Parson</h1>
<p>Edad: 26 años<br>
  Fecha de nacimiento: <time>1982-05-15</time><br>
  Lugar de nacimiento: Ontario, Canada
</p>

Michael Parson

Edad: 26 años
Fecha de nacimiento:
Lugar de nacimiento: Ontario, Canada

Atributos

Atributos específicos

datetime

Una representación específica para programas de los contenidos del elemento.

La presencia de este atributo en el elemento time no es obligatoria, pero si está ausente, el elemento no puede tener ningún descendiente.

Ejemplo

<p>Eli vuelve a casa <time datetime="2005-12-13">la semana próxima</time>.</p>

Eli vuelve a casa .

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.