La etiqueta <time> se utiliza para mostrar la fecha/hora legible para el ser humano. También puede utilizarse para codificar fechas y horas de forma legible por la máquina.

La principal ventaja para los usuarios es que pueden añadir recordatorios de cumpleaños o eventos programados en sus calendarios y los motores de búsqueda pueden producir resultados de búsqueda más inteligentes.

Sintaxis

<time datetime = "AAAA-MM-DDThh:mm:ssTZD | PTDHMS"> </time>

Donde:

  • AAAA – año (por ejemplo, 2022)
  • MM – mes (por ejemplo, 05 para mayo)
  • DD – día del mes (por ejemplo, 11)
  • T o espacio – separador
  • hh – horas (por ejemplo, 23)
  • mm – minutos (por ejemplo, 57)
  • ss – segundos (por ejemplo, 21)
  • TZD son las siglas de Time Zone Designator:
    • UTC (Coordinated Universal Time) – Tiempo Universal Coordinado, indicado por la letra Z.
    • +hh:mm (utilizando la zona horaria local) p. ej. -03:00 (desfase respecto a UTC)
    • -hh:mm (utilizando la zona horaria local) por ejemplo, +03:00 (desviación de UTC)

Ejemplos:

2021-12-31T12:00:00+03:00 - 31 de diciembre de 2021, 12-00, hora de Moscú.

2016-12-31T09:00:00Z - corresponden al mismo valor de tiempo.
  • P es un prefijo para el periodo
  • T o espacio – separador
  • D es un prefijo de días (por ejemplo, 2D)
  • H es un prefijo de horas (por ejemplo, 20H)
  • M es un prefijo de minutos (por ejemplo, 55M)
  • S es un prefijo para los segundos (por ejemplo, 5S)

Importante

Esta etiqueta contiene un único atributo datetime que se utiliza para definir la fecha/hora en una forma legible por la máquina del elemento <time>.

AtributoDescripción
datetimeEspecifica la fecha u hora que se especifica. Debe ser una representación del contenido del elemento en un formato legible por la máquina. Debe ser una cadena de fecha u hora válida.

Notas

  • El elemento HTML <time> se encuentra dentro de la etiqueta <body>.
  • La etiqueta <time> no debe utilizarse si la fecha puede calcularse.
  • La etiqueta <time> no debe utilizarse para fechas anteriores al calendario gregoriano.

Ejemplo

Ejemplo 1: Uso de la etiqueta <time> con el atributo datatime.

<!DOCTYPE html>
<html>
    <body>
        <h1>HTML desde Cero</h1>
        <h2>Etiqueta &#60;time&#62;</h2>        
 
<p>Me despierto a las  <time>6.00</time> de cada mañana.</p>
 
<p>El cumpleaños del blog HTML se celebra el
        <time datatime="2022-05-17 12:00">Día de Internet.</time>
        </p>
 
    </body>
</html>
Ejemplo de uso de la etiqueta HTML time
Ejemplo de uso de la etiqueta HTML time

Ejemplo 2: En este ejemplo de Documento HTML5, hemos creado dos etiquetas <time> – la primera etiqueta >time> muestra una fecha y la segunda muestra una hora expresada en un reloj de 24 horas.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de HTML5 por htmldesdecero.es</title>
</head>
<body>
<article>
  <h1>Encabezado del Artículo</h1>
  <p>Texto que aparece bajo el artículo</p>
</article>
<footer>
  <p>Este artículo fue publicado el <time>2021-12-20</time>.</p>
  <p>Nuestro negocio abre  a las <time>09:00</time>.</p>
</footer>
</body>
</html>
Ejemplo 2 con la etiqueta time
Ejemplo 2 con la etiqueta time

Ejemplo 3: Uso del atributo datetime para proporcionar una fecha y hora aún más específicas que el ejemplo anterior.

<p>Finalmente salimos a la carretera a las <time datetime="2021-12-14T05:00-07:00">5 de la mañana del pasado martes</time>.</p>

Otros Ejemplos:

Fecha:

<time datetime="2022"> <!--significa 2022-->
<time datetime="2022-12"> <!--significa diciembre de 2022 --> 
<time datetime="2021-12-31">  <!--significa el 31 de diciembre de 2021 --> 
<time datetime="12-31">  <!--significa el 31 de diciembre de cualquier año--> 
<time datetime="2022-W1"> <!--significa 1 semana de 2022 -->

Fecha y hora:

<time datetime="2021-12-31T22:00">  <!--significa el 31 de diciembre de 2021, a las 10 de la noche --> 
<time datetime="2021-12-31 22:00"> <!--lo mismos de arriba, pero sin T --> 
<time datetime="2021-12-31 22:45:50.777"> <!--con los minutos, los segundos y los milisegundos-->

Hora:

<time datetime="07:00">  <!--significa 7 de la mañana --> 
<time datetime="07:00-05:00"><!--significa las 7 am (UTC - Tiempo Coordinado Universal menos 5 horas --> 
<time datetime="08:00+05:00"> <!-- significa las 7 am (UTC - Tiempo Coordinado Universal de más de 5 horas) -->

Periodo/Duración:

<time datetime="P2D"> <!--duración 2 días --> 
<time datetime="PT20H25M"> <!--la duración es de 20 horas y 25 minutos -->

Ejemplo de marcado semántico y legible por máquina:

<!DOCTYPE html>
<html>
<head>
 <title> Ejemplo de uso de la etiqueta de HTML <time></title>
<style> 
time {
background-color : lime; /* establecemos el color de fondo */
}
</style>
</head>
<body>
 <p> Hemos planeado una fiesta en <time datetime="2021-12-31 22:00"> Año Nuevo a las 22:00 </time></p>
</body>
</html>
Ejemplo 3 de la etiqueta HTML time
Ejemplo 3 de la etiqueta HTML time

El único problema de <time> es que debe contener una fecha positiva en el calendario gregoriano proléptico, lo que significa que no se puede codificar una fecha anterior a la era cristiana.

Por otro lado, los motores de búsqueda pueden utilizar la información proporcionada en el atributo datetime de los resultados de la búsqueda para mostrar la fecha de la última actualización de un documento.

5/5 - (1 voto)