Etiqueta time HTML5: Representar una fecha y/o hora

Vamos a repasar en este post la nueva etiqueta time HTML5, su funcionalidad es la de representar una fecha y/o hora en una página web.

Esta nueva etiqueta HTML5 no tiene que estar obligatoriamente dentro de un formulario. Quizás os puedan interesar los post sobre los siguientes input de fecha y hora:

• Date
• Datetime
• Datetime-local
• Month
• Time
• Week

Sintaxis de la etiqueta time HTML5

Siguiendo la documentación oficial la sintaxis es la siguiente:

<time>fecha u hora</time>

Tal y como podemos ver en el código superior la sintaxis es sencilla, entre sus etiquetas solamente debemos mostras un formato de fecha válido.

Una variante de esta sintaxis es la siguiente:

<time datetime="fecha">Texto informativo</time>

Con el atributo datetime podemos enmarcar en la etiqueta time un texto descriptivo, mientras que con dicho atributo representamos la fecha. Una etiqueta con similar funcionalidad es la etiqueta data.

Ejemplos de la etiqueta time HTML5 con fechas válidas

Voy a poneros ahora varios ejemplos con fechas válidas soportadas:

<!-- Año y mes -->
<time>2015-07</time>

<!-- Fecha -->
<time>2015-07-26</time>

<!-- Hora -->
<time>23:54</time>
<time>23:54:39</time>

<!-- Fecha y hora -->
<time>2015-07-26T23:44</time>
<time>2015-07-26T11:44:17</time>
<time>2015-07-26 23:44</time>
<time>2015-07-26 23:44:17</time>

<!-- Zona horaria -->
<time>Z</time>
<time>+0100</time>
<time>+01:00</time>
<time>-0800</time>
<time>-08:00</time>

Ejemplos de la etiqueta time con el atributo datetime

Y ahora varios ejemplos de con el atributo datetime:

<p><time datetime="2015-12-31 23:59">Nochevieja es el día 31</time></p>
<p><time datetime="2015-06-11">El verano comienza en junio</time></p>

Tal y como podéis ver los formatos de fecha en el atributo son los mismos que los de la etiqueta. De esta manera podemos representar la fecha acompañada de un texto informativo.