La Etiqueta TIME

Se utiliza para representar fechas, horas o duraciones en un formato legible tanto para humanos como para máquinas.

La etiqueta <time> en HTML se utiliza para representar fechas, horas o duraciones en un formato legible tanto para humanos como para máquinas. Es especialmente útil para mejorar la accesibilidad, el SEO y la integración con aplicaciones que requieren datos temporales estructurados. Aquí te explicamos cómo usarla correctamente.

Sintaxis básica

La etiqueta <time> incluye un atributo datetime que especifica el valor en formato estándar (ISO 8601), mientras que el contenido visible es la representación humana.

<time datetime="2023-10-05">5 de octubre de 2023</time>

Atributo datetime

El atributo datetime define el valor legible por máquinas. Sus formatos comunes son:

Tipo Formato Ejemplo
Fecha YYYY-MM-DD datetime="2023-10-05"
Hora HH:MM:SS datetime="14:30:00"
Fecha y hora YYYY-MM-DDTHH:MM:SS±HH:MM datetime="2023-10-05T14:30:00-05:00"
Duración PnYnMnDTnHnMnS datetime="P3D" (3 días)

Casos de uso comunes

a) Fecha específica

<p>
   El evento será el <time datetime="2023-12-25">25 de diciembre de 2023</time>.
</p>

b) Hora específica

<p>
   La reunión comienza a las <time datetime="09:00">9:00 AM</time>.
</p>

c) Fecha y hora con zona horaria

<time datetime="2023-10-05T19:30:00-05:00">5 de octubre a las 7:30 PM (GMT-5)</time>

d) Duración

<p>
   El curso tiene una duración de <time datetime="P2M">2 meses</time>.
</p>

e) Tiempo relativo (usando JavaScript)

<time id="fecha-relativa" datetime="2023-10-05"></time>

<script>
  const fecha = new Date('2023-10-05');
  const opciones = { year: 'numeric', month: 'long', day: 'numeric' };
  document.getElementById('fecha-relativa').textContent = 
    fecha.toLocaleDateString('es-ES', opciones);
</script>

Beneficios clave

  • Accesibilidad: Los lectores de pantalla interpretan el formato estándar.

  • SEO: Los motores de búsqueda entienden mejor el contexto temporal.

  • Integración: Aplicaciones y scripts pueden usar el valor de datetime para cálculos.

Personalización con CSS

Estiliza el texto de <time> para destacarlo:

time {
  color: #2ecc71;
  font-weight: bold;
  font-style: italic;
}

Buenas prácticas

  1. Siempre incluye datetime: Aunque el contenido sea legible, el atributo es obligatorio para la semántica.

  2. Usa formatos ISO 8601: Asegúrate de que datetime cumpla con el estándar.

  3. Evita ambigüedades: Por ejemplo, usa PM o formato de 24 horas para evitar confusiones.

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    time {
      color: #e74c3c;
      font-weight: bold;
    }
    .evento {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="evento">
    <h2>Concierto de Rock</h2>
    <p>
      Fecha: <time datetime="2023-11-15">15 de noviembre de 2023</time>.<br>
      Hora: <time datetime="20:00">8:00 PM</time>.<br>
      Duración: <time datetime="PT3H">3 horas</time>.
    </p>
  </div>
</body>
</html>

Errores comunes

Formato incorrecto en datetime:

<time datetime="5 de octubre">2023-10-05</time> <!-- Formato inválido -->

Omitir el atributo datetime

<time>2023-10-05</time> <!-- Falta datetime -->

Conclusión

La etiqueta <time> es esencial para:

  • Estandarizar fechas y horas en la web.

  • Mejorar la interoperabilidad entre sistemas.

  • Enriquecer la semántica del contenido.

Recuerda:

  • Usa siempre el atributo datetime con formato ISO 8601.

  • Combínala con CSS para un diseño atractivo.

  • Prioriza la claridad en el contenido visible.

¡Ahora puedes integrar fechas y horas de manera profesional en tus proyectos web!