Etiqueta HTML <time>
La etiqueta <time>, un nuevo elemento en HTML 5, define una hora legible en un reloj de 24 horas o una fecha precisa en el calendario gregoriano.
La etiqueta <time> es uno de los elementos HTML5. Marca un momento en el tiempo o un intervalo de tiempo de manera que sea legible tanto por personas como por máquinas. Puede representar uno de los siguientes valores:
- una hora legible en un reloj de 24 horas,
- una fecha precisa en el calendario gregoriano (con información opcional de zona horaria y hora),
- una duración.
La etiqueta <time> no debe usarse para fechas anteriores a la introducción del calendario gregoriano.
¿Por qué usar <time>? El enfoque legible por máquinas
El texto visible dentro de un elemento <time> permanece libre y amigable para las personas — puedes escribir "El próximo viernes", "28 de septiembre" o "en dos horas". El atributo opcional datetime contiene una versión estricta y legible por máquinas de ese mismo momento para que el software pueda interpretarlo con precisión:
- Los motores de búsqueda leen
datetimepara construir resultados más inteligentes y conscientes del tiempo (por ejemplo, mostrando fechas de eventos en fragmentos enriquecidos). - Las herramientas de calendario y los navegadores pueden ofrecer recordatorios de "añadir al calendario" porque conocen el instante exacto, no solo las palabras.
- Los scripts y las tecnologías de asistencia pueden reformatear, localizar o comparar el valor de forma fiable.
Si omites el atributo datetime, el contenido de texto del elemento debe ser en sí mismo una cadena de fecha/hora válida — y en ese caso el elemento no debe contener elementos anidados, solo texto.
Sintaxis
El elemento <time> requiere tanto la etiqueta de apertura como la de cierre. El contenido se escribe entre las etiquetas de apertura <time> y de cierre </time>.
Ejemplo de la etiqueta HTML <time>:
Etiqueta HTML <time>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>The game will be held on <time datetime="2018-09-28T19:00">September 28</time>.</p>
<p>It will start at <time>19:00</time></p>
</body>
</html>En el primer párrafo, el atributo datetime contiene el valor preciso para las máquinas mientras que el texto visible dice "September 28". En el segundo, no hay atributo datetime, por lo que el texto 19:00 es en sí mismo el valor legible por máquinas.
Los formatos de datetime
El atributo datetime debe contener una cadena de fecha/hora válida, siguiendo las convenciones del estándar ISO 8601 que utiliza HTML. Aquí están los formatos más comunes, listos para copiar y pegar:
| Qué representa | Valor de ejemplo | Notas |
|---|---|---|
| Fecha | 2024-03-15 | Año-Mes-Día. |
| Año y mes | 2024-03 | Día omitido. |
| Solo hora | 14:30 | Reloj de 24 horas, :ss opcional. |
| Fecha y hora (UTC) | 2024-03-15T14:30:00Z | T separa la fecha y la hora; Z significa UTC. |
| Fecha y hora con desplazamiento | 2024-03-15T14:30:00+02:00 | Desplazamiento de zona horaria respecto a UTC. |
| Duración | PT2H30M | "2 horas, 30 minutos". |
| Duración (días) | P2D | "2 días". |
| Semana | 2024-W11 | La semana ISO número 11 de 2024. |
Una duración siempre comienza con P (período); una T precede a los componentes de hora, por lo que PT2H30M se lee como 2 horas y 30 minutos, mientras que P2D son 2 días.
Ejemplo: un valor de solo hora
Aquí el texto visible es también el valor para las máquinas, por lo que no se necesita el atributo datetime.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>Doors open at <time>09:00</time> sharp.</p>
</body>
</html>Ejemplo: una duración
Usa el atributo datetime con un valor P/PT para marcar cuánto dura algo.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>The recipe needs <time datetime="PT2H30M">2 hours and 30 minutes</time> in the oven.</p>
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| datetime | YYYY-MM-DD, YYYY-MM-DDThh:mm, hh:mm, etc. | Especifica la hora/fecha en un formato legible por máquinas. El valor debe seguir un formato de cadena de fecha/hora válido (por ejemplo, ISO 8601). También se admiten desplazamientos de zona horaria como +02:00 o Z. |
La etiqueta <time> también admite los Atributos Globales.
Nota: El atributo pubdate era compatible anteriormente, pero fue desaprobado y eliminado en especificaciones HTML posteriores.
Estilizar <time>
El elemento <time> es en línea y sin estilos por defecto, por lo que tiene el mismo aspecto que el texto circundante. Un truco útil es el selector de atributo time[datetime], que selecciona solo los elementos que contienen un valor legible por máquinas — por ejemplo, para mostrar el valor exacto al pasar el cursor mediante un title, o para dar a esos instantes una señal visual sutil.
/* Highlight only <time> elements that have a datetime attribute */
time[datetime] {
border-bottom: 1px dotted currentColor;
cursor: help;
}Etiquetas relacionadas
- Etiqueta HTML
<data>— el equivalente de propósito general para valores legibles por máquinas no temporales. - Referencia de Elementos HTML5 — la lista completa de elementos introducidos en HTML5.