Etiqueta time en HTML

¿Qué es la etiqueta <time> en HTML?

La etiqueta <time> es un elemento de HTML5 que se utiliza para representar fechas, horas o una combinación de ambas en un documento HTML. Su objetivo principal es facilitar la legibilidad y la interpretación de fechas y horas tanto para los usuarios como para los motores de búsqueda y otros programas.

El elemento <time> puede incluir atributos opcionales para proporcionar información adicional y facilitar el procesamiento de la fecha y la hora por parte de los navegadores y otros programas.

El atributo más comúnmente utilizado es datetime, que permite especificar la fecha y/o hora en un formato estándar. El contenido de la etiqueta puede ser cualquier representación legible por humanos de la fecha y hora.

Ejemplo de uso

Aquí tienes un ejemplo de cómo usar la etiqueta <time>:


<p>La reunión será el próximo <time datetime="2023-03-20">20 de marzo</time>.</p>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, la etiqueta <time> se utiliza para indicar que la reunión será el 20 de marzo. El atributo datetime especifica la fecha en el formato estándar “AAAA-MM-DD”. Esto facilita que los programas y motores de búsqueda interpreten correctamente la fecha.

Es importante tener en cuenta que la etiqueta <time> no proporciona ninguna funcionalidad de visualización o estilo por sí misma. Para aplicar estilos o modificar la apariencia del contenido de la etiqueta, deberás utilizar CSS u otros métodos de estilo.

El contenido de la etiqueta debe incluir una fecha u hora en un formato estándar, como ISO 8601.

Atributos

La etiqueta <time> en HTML5 es bastante simple y tiene un solo atributo principal, que es el atributo datetime. Este atributo se utiliza para proporcionar una representación legible por máquinas de la fecha, hora o ambos.

Atributo datetime:

  • datetime: Este atributo especifica la fecha y/o hora en un formato estándar, lo que permite a los navegadores y otros programas interpretar y procesar fácilmente la información de fecha y hora. Los formatos aceptados para el atributo datetime incluyen:
    • Fecha: “AAAA-MM-DD” (por ejemplo, “2023-03-17” para el 17 de marzo de 2023)
    • Hora: “hh:mm” (por ejemplo, “14:30” para las 2:30 PM)
    • Hora con segundos: “hh:mm:ss” (por ejemplo, “14:30:45” para las 2:30:45 PM)
    • Fecha y hora: “AAAA-MM-DDThh:mm” (por ejemplo, “2023-03-17T14:30” para el 17 de marzo de 2023 a las 2:30 PM)
    • Fecha y hora con segundos: “AAAA-MM-DDThh:mm:ss” (por ejemplo, “2023-03-17T14:30:45” para el 17 de marzo de 2023 a las 2:30:45 PM)

También se pueden agregar indicaciones de zona horaria utilizando el desplazamiento de la zona horaria (por ejemplo, “2023-03-17T14:30:45-07:00” para una fecha y hora con una diferencia de 7 horas respecto al tiempo universal coordinado, UTC).

A continuación se muestra un ejemplo de cómo utilizar la etiqueta <time> con el atributo datetime:


<p>La conferencia comenzará el <time datetime="2023-04-15">15 de abril de 2023</time> a las <time datetime="09:00">9:00 AM</time>.</p>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utilizan dos elementos <time> para representar la fecha y la hora de inicio de una conferencia. El atributo datetime asegura que las máquinas puedan interpretar la información correctamente.

Más ejemplos

Aquí te presento tres ejemplos completos y avanzados de la etiqueta <time> de HTML5:

Ejemplo 1: Utilizando la etiqueta <time> para mostrar una fecha y hora específicas.


<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo de etiqueta time</title>
</head>
<body>
	<header>
		<h1>Horario de atención</h1>
	</header>
	<main>
		<p>Estamos abiertos todos los días de la semana de <time datetime="09:00">9:00 am</time> a <time datetime="18:00">6:00 pm</time>.</p>
		<p>¡Visítanos en cualquier momento durante nuestras horas de atención!</p>
	</main>
	<footer>
		<p>Derechos de autor &copy; 2022. Todos los derechos reservados.</p>
	</footer>
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <time> para mostrar las horas de atención de un negocio. Hemos utilizado el atributo “datetime” para especificar la fecha y hora en que el negocio abre y cierra.

El valor del atributo “datetime” debe estar en el formato de fecha y hora ISO 8601, que es “AAAA-MM-DDThh:mm:ss”.

Ejemplo 2: Utilizando la etiqueta <time> para mostrar una fecha específica.


<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo de etiqueta time</title>
</head>
<body>
	<header>
		<h1>Próximo concierto</h1>
	</header>
	<main>
		<p>Nuestro próximo concierto será el <time datetime="2022-09-15">15 de septiembre de 2022</time> en el estadio local.</p>
		<p>¡Asegúrate de comprar tus boletos ahora antes de que se agoten!</p>
	</main>
	<footer>
		<p>Derechos de autor &copy; 2022. Todos los derechos reservados.</p>
	</footer>
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <time> para mostrar la fecha del próximo concierto. Hemos utilizado el atributo “datetime” para especificar la fecha del concierto en formato ISO 8601.

Ejemplo 3: Utilizando la etiqueta <time> para mostrar una duración específica.


<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo de etiqueta time</title>
</head>
<body>
	<header>
		<h1>Curso en línea</h1>
	</header>
	<main>
		<p>Nuestro curso en línea de programación dura <time datetime="PT20H">20 horas</time> y cubre los fundamentos de HTML, CSS y JavaScript.</p>
		<p>¡Inscríbete ahora y comienza a aprender a tu propio ritmo!</p>
	</main>
	<footer>
		<p>Derechos de autor &copy; 2022. Todos los derechos reservados.</p>
	</footer>
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <time> para mostrar la duración de un curso en línea. Hemos utilizado el atributo “datetime” para especificar la duración del curso en formato ISO 8601, donde “PT” significa “periodo de tiempo” y “H” indica las horas. Es decir, “PT20H” significa que la duración del curso es de 20 horas.

Espero que estos ejemplos te hayan ayudado a comprender mejor cómo utilizar la etiqueta <time> en HTML5. Recuerda que esta etiqueta es muy útil para mostrar fechas, horas y duraciones en tu página web de una manera semántica y accesible.