Tienda
1


















La imagen muestra un fondo azul con un texto centrado en letras blancas que muestra la palabra time

Última modificación: 2024-06-18

Descripción de la Etiqueta <time> en HTML5

La etiqueta <time> en HTML5 se utiliza para representar tiempos, fechas o ambos en un documento. Este elemento puede ser útil para proporcionar a los navegadores , motores de búsqueda y otras herramientas información semántica sobre valores temporales, facilitando tareas como el formateo de fechas, la localización y la agenda de eventos.

Atributos del Elemento <time>

  1. datetime (opcional):

    • Permite especificar una representación legible por máquina de la fecha o tiempo. Aunque es un atributo opcional, su uso es muy recomendado para proporcionar un valor exacto en un formato estandarizado.
    • Formatos válidos incluyen una fecha completa (YYYY-MM-DD), una hora (HH:MM), o combinaciones de fecha y hora (YYYY-MM-DDTHH:MM:SS).
    • Ejemplos:
      • Solo fecha: 2023-10-20
      • Fecha y hora: 2023-10-20T14:30:00
      • Solo hora: 14:30:00
  2. pubdate (obsoleto en HTML5):

    • Anteriormente se utilizaba para especificar que la fecha contenida es la fecha de publicación del artículo o contenido. Sin embargo, este atributo ha sido eliminado y se aconseja utilizar otras etiquetas y métodos para marcar fechas de publicación.

Uso de <time> en HTML5 con Ejemplos

Ejemplo 1: Representación de una Fecha

<p>El evento se llevará a cabo el <time datetime="2023-10-20">20 de octubre de 2023</time>.</p>

En este ejemplo, el elemento <time> proporciona tanto una representación legible por humanos ("20 de octubre de 2023") como una representación legible por máquinas (2023-10-20).

Ejemplo 2: Fecha y Hora Combinadas

<p>La reunión está programada para <time datetime="2023-10-20T14:30">el 20 de octubre de 2023 a las 2:30 PM</time>.</p>

Este ejemplo muestra tanto la fecha como la hora en un formato amigable para los usuarios, mientras que el atributo datetime proporciona una forma estándar para herramientas y scripts.

Ejemplo 3: Solo Hora

<p>La alarma está configurada para sonar a las <time datetime="07:00">7:00 AM</time>.</p>

Aquí, solo se especifica una hora, lo que puede ser útil para alarmas, horarios y otros eventos basados en el tiempo.

Ejemplo 4: Uso en Contexto de Publicaciones

<article>
  <h2>Nueva Publicación en el Blog</h2>
  <p>Publicado el <time datetime="2023-10-10">10 de octubre de 2023</time> por Juan Pérez.</p>
  <p>Contenido del artículo...</p>
</article>

En este caso, la etiqueta <time> se utiliza para marcar la fecha de publicación de un artículo, contextualizándolo de manera semántica dentro de la publicación.

Conclusión

La etiqueta <time> en HTML5 es una herramienta valiosa para proporcionar información temporal de manera semántica y estructurada. Aunque su atributo pubdate ha sido obsoleto, el atributo datetime sigue siendo fundamental para asegurar que las fechas y horas pueden ser interpretadas correctamente por diversas aplicaciones y herramientas. Utilizar <time> adecuadamente mejora la accesibilidad y la interoperabilidad de los contenidos web.




Colaboraciónes de nuestros usuarios

¿Tienes algo que agregar? ¡Déjanos tu colaboración!