Etiqueta time en HTML: fechas, horas y datetime

La etiqueta <time> en HTML representa una fecha, una hora u otro valor temporal admitido, como una duración. Sirve para escribir una fecha comprensible para las personas y asociarla con un valor legible por máquinas mediante datetime. Úsala en publicaciones, horarios o fichas de eventos cuando quieras expresar ese significado temporal.

<p>Publicado el <time datetime="2026-10-03">3 de octubre de 2026</time>.</p>

Se ve «Publicado el 3 de octubre de 2026.». El atributo vincula la fecha en español con 2026-10-03, pero ese valor no se imprime automáticamente. <time> tampoco añade un calendario ni una apariencia especial por defecto.

Sintaxis y contexto válido

Escribe una apertura <time> y un cierre </time>; ninguna de las dos etiquetas se puede omitir. Es contenido de frase: cabe dentro de un párrafo o de una entrada de lista que admita ese contenido. Con datetime puede contener texto y otros elementos de frase, como <em>, pero no un <div> ni varios párrafos.

Si falta datetime, solo puede contener texto, sin elementos hijos, y ese texto debe cumplir una de las sintaxis temporales permitidas. Por ejemplo:

<p>La recepción abre a las <time>09:00</time>.</p>

Aquí 09:00 es a la vez el texto visible y el valor temporal. En cambio, <time>3 de octubre de 2026</time> necesita datetime="2026-10-03" para ser válido. Estas restricciones proceden del modelo de contenido de time en el HTML Living Standard.

Texto legible y valor de datetime

datetime es el atributo específico del elemento. Su valor debe representar el contenido con uno de los formatos definidos por HTML; no acepta cualquier cadena que una persona interprete como fecha. Estos son algunos valores válidos:

En una fecha completa, el orden es año, mes y día, con guiones. En la fecha y hora del ejemplo, T separa ambas partes. Usa una hora de 24 horas: 18:30, no 6:30 pm. Además del formato, la fecha debe existir: 2026-02-30 no es válida. El estándar detalla las reglas de fechas y horas.

Cambiar solo datetime conserva el texto que ve el lector y modifica el valor para máquinas. Cambiar solo el texto conserva el atributo. Revisa ambos cuando cambie una publicación o un evento: una fecha visible que contradiga el atributo transmite dos datos distintos.

Zonas horarias y duraciones

El offset -06:00 indica seis horas menos que UTC. Por eso 2026-10-10T18:30-06:00 y 2026-10-11T00:30Z representan el mismo instante; Z indica UTC. Para una reunión en línea, la fecha, la hora y el offset explícitos evitan dejar el instante a interpretación de cada participante.

Un offset no identifica una zona geográfica ni sus reglas de cambios estacionales. Para un horario recurrente ligado a una ciudad, conserva también la localidad y calcula el offset correspondiente a cada fecha si tu aplicación lo necesita.

¿Time cambia la zona horaria? No. El navegador muestra el texto que escribiste, incluso si quien visita la página vive en otra zona. Convertirlo y localizarlo requiere lógica adicional, por ejemplo con JavaScript; <time> tampoco actualiza un reloj.

PT1H30M expresa una duración de una hora y treinta minutos: P inicia la duración, T introduce la parte de tiempo, H indica horas y M minutos. No significa «a la 1:30» ni calcula una hora de finalización. HTML define su propia sintaxis de duraciones; no admite todas las variantes de duración de ISO 8601, como años o meses de calendario.

Ejemplo práctico: ficha de un taller en línea

Guarda este documento completo en UTF-8 como taller.html y ábrelo en un navegador. El evento es ficticio y fija su inicio en UTC−06:00. No necesita servidor, CSS, JavaScript ni archivos adicionales.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Horario del taller de HTML</title>
  </head>
  <body>
    <h1>Taller de HTML en línea</h1>
    <p>
      Inicio:
      <time datetime="2026-10-10T18:30-06:00">
        10 de octubre de 2026 a las 18:30 (UTC−06:00)</time>.
    </p>
    <p>Duración: <time datetime="PT1H30M">1 hora y 30 minutos</time>.</p>
    <p>El horario se muestra en UTC−06:00. Comprueba su equivalencia en tu zona.</p>
  </body>
</html>

1. Al abrirlo, se ve el nombre del taller, el inicio con su zona y la duración. Los valores de los atributos permanecen en el HTML.
2. Inspecciona los dos elementos <time>: el primero codifica un instante y el segundo una duración. El navegador no añade la hora de finalización.
3. Cambia tanto el texto 18:30 como la hora del primer datetime a 19:00. Se muestra el inicio nuevo; la duración sigue siendo la misma.
4. Retira las etiquetas <time> conservando su contenido. La ficha se sigue leyendo igual, pero pierde la asociación temporal con los valores normalizados.
5. Desactiva JavaScript y recarga: el resultado permanece igual porque este documento no utiliza scripts.

También puedes probar el ejemplo mínimo dentro del body de este documento. Si retiras solo su datetime, la fecha en español sigue visible, pero el marcado deja de cumplir la regla del valor temporal sin atributo.

Atributos, DOM y accesibilidad

Los atributos globales id, class y lang permiten identificar el elemento, seleccionarlo para CSS o declarar el idioma del texto. No sustituyen datetime. Una propiedad CSS como color cambia su aspecto; en JavaScript, la propiedad DOM .dateTime refleja el atributo como una cadena, con esa capitalización. No devuelve un objeto Date ni valida automáticamente la fecha.

Mantén fecha, hora y zona comprensibles en el texto visible, como en la ficha. <time> no es un control y no necesita tabindex ni un rol añadido: ARIA en HTML reconoce su semántica nativa. No presupongas que un lector de pantalla anunciará datetime o convertirá la hora; la información necesaria para asistir debe estar en el contenido.

Errores frecuentes y etiquetas relacionadas

¿Datetime es obligatorio? No cuando el contenido es únicamente texto con una sintaxis temporal admitida, como <time>09:00</time>. Sí hace falta para una fecha localizada como «3 de octubre de 2026» o si incluyes elementos hijos.

Si una fecha «no funciona», comprueba primero:

• El atributo se llama datetime, no date ni value, y contiene 2026-10-03, no 3 de octubre ni 03/10/2026.
• El día existe y la hora está dentro de sus límites; 24:30 no es una hora válida.
• Texto y atributo coinciden, incluida la zona cuando expresas un instante.
• La función esperada necesita código adicional: una cuenta atrás, conversión horaria o recordatorio no surge de <time> por sí solo.

Para asociar un nombre de producto con un código, utiliza <data> y value. Para registrar contenido eliminado o añadido, utiliza <del> o <ins>: su atributo datetime fecha la modificación, mientras que <time> representa el valor temporal que contiene. Si solo necesitas agrupar texto para darle estilos, puedes usar <span>.

Compatibilidad y fuentes

Compatibilidad consultada el 4 de octubre de 2026: MDN considera el elemento time y la propiedad .dateTime ampliamente disponibles. El soporte del marcado no implica conversión horaria ni una lectura idéntica en todas las tecnologías de asistencia.

El Living Standard fija el significado y los formatos; MDN complementa la explicación y la compatibilidad. Añadir <time> tampoco garantiza resultados enriquecidos ni posiciones en buscadores.