<time>

<time> marca una fecha, hora o duración de forma simultáneamente legible para personas y para máquinas. El contenido visible puede ser texto libre en cualquier idioma y formato (“el próximo martes”, “el quince de julio”, “en tres semanas”), mientras que el atributo datetime codifica el mismo dato en formato estándar ISO 8601 para que los motores de búsqueda, los asistentes de calendario, los agregadores de contenido y otras herramientas automatizadas puedan interpretarlo sin ambigüedad.

El problema que resuelve es de parsing. Una fecha como “15/07/26” puede ser el 15 de julio de 2026 (Argentina, Europa) o el 7 de mayo de 2026 (EE.UU., si se lee MM/DD/YY). “El próximo martes” no tiene sentido sin saber cuándo se escribió el texto. El atributo datetime="2026-07-15" elimina esa ambigüedad: Google sabe exactamente cuándo fue publicado el artículo, el asistente sabe exactamente cuándo es el evento.

Sin datetime, el elemento es válido pero las máquinas deben inferir la fecha del texto visible, con todos los riesgos de ambigüedad que eso implica. Si el texto visible es ya una fecha en formato ISO 8601 (“2026-07-15”), el datetime no es necesario. En cualquier otro caso — fechas en lenguaje natural, en formato local, con solo mes y día — el datetime es la pieza que hace verdaderamente útil al elemento.

Cómo funciona

<time> es un elemento en línea. No agrega estilo visual por defecto — se ve como texto normal. Su valor está en la semántica: separa la representación para personas (el contenido del elemento) de la representación para máquinas (el valor de datetime).

Los motores de búsqueda como Google usan <time> con datetime para mostrar fechas en rich snippets, como la fecha de publicación de un artículo en los resultados. Los asistentes de voz y las aplicaciones de calendario pueden extraer la fecha para crear recordatorios.

Modelo de contenido

Acepta contenido en línea (phrasing content), pero con una restricción: si tiene el atributo datetime, el contenido puede ser texto libre. Si no tiene datetime, el contenido del elemento debe ser una fecha o hora válida en formato ISO 8601 (porque eso es lo que las máquinas usarán).

Va dentro de párrafos, headings, <li>, <td>, o cualquier elemento que acepte contenido en línea.

Sintaxis

<!-- Fecha con datetime: texto libre + formato de máquina -->
<p>El evento es el <time datetime="2026-07-15">15 de julio</time>.</p>

<!-- Fecha y hora -->
<p>La reunión es el <time datetime="2026-07-15T10:30">15 de julio a las 10:30</time>.</p>

<!-- Solo hora -->
<p>El show empieza a las <time datetime="20:00">8 de la noche</time>.</p>

<!-- Duración -->
<p>El curso dura <time datetime="P3W">tres semanas</time>.</p>

<!-- Sin datetime: el contenido debe ser fecha válida -->
<p>Publicado el <time>2026-07-15</time>.</p>

<!-- Año y mes -->
<p>El informe de <time datetime="2026-07">julio de 2026</time> está disponible.</p>

Atributos

datetime

El formato estándar ISO 8601 para la fecha, hora o duración. Valores más comunes:

El T separa la fecha de la hora. La zona horaria se puede añadir al final (Z para UTC, +02:00 para UTC+2).

Accesibilidad

Los lectores de pantalla leen el contenido visible del elemento. No hay anuncio especial de “esto es una fecha”. Sin embargo, el datetime hace la fecha accesible a herramientas que procesan el árbol de accesibilidad (como asistentes de voz que crean recordatorios). El contenido visible sigue siendo la fuente principal para el usuario.

Ejemplo realista

<article>
  <h1>Taller de HTML para principiantes</h1>
  <p>Publicado el <time datetime="2026-07-01">1 de julio de 2026</time></p>

  <p>
    El taller se realiza el
    <time datetime="2026-07-15T09:00">15 de julio de 2026 a las 9:00</time>
    en el Aula 3.
  </p>

  <p>Duración: <time datetime="PT4H">4 horas</time>.</p>
</article>

Notas, gotchas e interacción

• Sin datetime, el texto debe ser ISO 8601. Si no escribís datetime, el parser usa el contenido del elemento como fecha de máquina — ese contenido tiene que ser válido. Si el texto visible no es una fecha ISO, siempre agregá datetime.
• No es un input de fecha. <time> es solo presentación de datos; no crea ningún control interactivo. Para seleccionar fechas, usá <input type="date">.
• Zona horaria. Si la hora importa en un contexto internacional, incluí la zona horaria en datetime: 2026-07-15T10:30-03:00 para Argentina (UTC-3).
• <time> para duraciones. La duración usa el formato de período de ISO 8601: P + cantidad + unidad. P1Y = 1 año, P3M = 3 meses, P2W = 2 semanas, P5D = 5 días, PT3H = 3 horas, PT30M = 30 minutos.

Vigente / legacy

<time> es un elemento de HTML5. No hay forma legacy. En HTML 4, las fechas se marcaban con texto plano sin elemento semántico.