El Atributo DATETIME

El atributo datetime se utiliza en la etiqueta <time> para especificar una fecha y/o hora en formato legible por máquinas, mientras que el contenido de la etiqueta muestra la misma información en un formato legible para humanos. Este atributo mejora la accesibilidad, el SEO y permite a los navegadores y motores de búsqueda interpretar correctamente fechas y eventos. Aquí un tutorial completo:

Sintaxis Básica

La etiqueta <time> junto con datetime permite definir fechas y horas de manera semántica:

<time datetime="YYYY-MM-DDThh:mm:ss±TZ">Texto legible</time>

• datetime: Formato ISO 8601 (obligatorio para fechas complejas).

• Contenido: Fecha/hora en formato humano (ej: "5 de octubre de 2023").

Formatos Válidos para datetime

Fecha únicamente

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

Formato: YYYY-MM-DD.

Hora únicamente

<time datetime="14:30">2:30 PM</time>

Formato: hh:mm o hh:mm:ss (ej: 14:30:45).

Fecha y hora combinadas

<time datetime="2023-10-05T14:30:00-05:00">5 de octubre de 2023, 2:30 PM (GMT-5)</time>

Formato: YYYY-MM-DDThh:mm:ss±TZ, donde T separa fecha y hora, y ±TZ es la zona horaria (ej: -05:00 para GMT-5).

Duración (menos común)

<time datetime="PT2H30M">2 horas y 30 minutos</time>

Formato: PTnhNm (ej: PT2H30M = 2 horas y 30 minutos).

Casos de Uso Prácticos

Ejemplo 1: Publicación de un artículo en un blog

<p>
  Publicado el 
  <time datetime="2023-10-05">5 de octubre de 2023</time>.
</p>

Ejemplo 2: Eventos futuros con hora específica

<p>
  Conferencia: 
  <time datetime="2024-03-15T18:00:00-05:00">15 de marzo de 2024, 6:00 PM (GMT-5)</time>.
</p>

Ejemplo 3: Horarios históricos

<p>
  La Luna fue pisada por primera vez el 
  <time datetime="1969-07-20">20 de julio de 1969</time>.
</p>

Beneficios Clave

• Accesibilidad: Lectores de pantalla interpretan el formato ISO para usuarios con discapacidades visuales.

• SEO: Los motores de búsqueda (Google) extraen fechas estructuradas para fragmentos destacados o eventos.

• Semántica: Define claramente el significado de una fecha/hora en el documento.

Errores Comunes y Soluciones

Error 1: Formato ISO incorrecto

<!-- Incorrecto -->
<time datetime="October 5, 2023">5/10/2023</time>

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

Error 2: Usar <time> sin datetime para fechas complejas

<!-- Incorrecto -->
<time>2023-10-05T14:30</time>

<!-- Correcto -->
<time datetime="2023-10-05T14:30">2:30 PM, 5/10/2023</time>

Integración con JavaScript

Puedes acceder al valor de datetime para cálculos o actualizaciones dinámicas:

<time id="eventDate" datetime="2024-12-31">31 de diciembre de 2024</time>

<script>
  const eventDateElement = document.getElementById('eventDate');
  const isoDate = eventDateElement.dateTime; // Accede al valor de "datetime"
  const dateObj = new Date(isoDate);

  console.log(dateObj.toLocaleDateString()); // "31/12/2024"
</script>

Compatibilidad en Navegadores

• Soporte universal: Todos los navegadores modernos (Chrome, Firefox, Safari, Edge) admiten <time> y datetime.

• IE11: Parcialmente compatible, pero requiere polyfills para funciones avanzadas.

Buenas Prácticas

Usa datetime siempre que el contenido no esté en formato ISO:

Ej: "Hoy" o "Mañana" no son fechas explícitas.

Combina con microdatos o Schema.org:

Mejora el SEO para eventos:

<div itemscope itemtype="http://schema.org/Event">
  <h1 itemprop="name">Conferencia de Tecnología</h1>
  <time itemprop="startDate" datetime="2024-03-15T18:00:00-05:00">15 de marzo, 6:00 PM</time>
</div>

Conclusión

El atributo datetime es esencial para añadir significado semántico a fechas y horas en HTML, mejorando tanto la experiencia del usuario como el procesamiento automatizado. ¡Ideal para blogs, calendarios, o cualquier sitio que maneje información temporal!