Etiquetas de fecha/hora en HTML con ejemplos

En el desarrollo web, es fundamental representar correctamente las fechas y horas para garantizar que el contenido sea accesible, comprensible y funcional. HTML proporciona varias etiquetas que permiten incorporar fechas y horas de manera semántica, mejorando tanto la usabilidad como la interoperabilidad con otros sistemas.

Desde la etiqueta <time> para representar fechas y horas en un formato estándar, hasta los elementos de formulario como <input type="date"> o <input type="time"> que permiten la selección interactiva de estos valores, estas herramientas facilitan la creación de sitios web más dinámicos y accesibles.

Time

EJEMPLO 1: FECHA

La etiqueta <time> es utilizada para representar un valor de fecha o hora en el contenido de la página. Es útil tanto para fechas como para horas o periodos de tiempo.

Atributo datetime: Se utiliza para definir el valor estándar de la fecha (en formato ISO 8601).

				
					<time datetime="2025-02-05">5 de febrero de 2025</time>

EJEMPLO 2: HORA

Atributo datetime: Especifica la hora con la fecha (en formato ISO 8601).

				
					<time datetime="2025-02-05T14:30">14:30</time>

EJEMPLO 3: FECHA Y HORA

				
					<time datetime="2025-02-05T14:30:00">5 de febrero de 2025, 14:30</time>

input type="date"

Esta etiqueta permite a los usuarios seleccionar una fecha.

				
					<label for="fecha">Selecciona una fecha:</label>
<input type="date" id="fecha" name="fecha">

input type="time"

Permite seleccionar una hora.

				
					<label for="hora">Selecciona una hora:</label>
<input type="time" id="hora" name="hora">

input type="datetime-local"

Permite seleccionar tanto la fecha como la hora.

				
					<label for="fechaHora">Selecciona fecha y hora:</label>
<input type="datetime-local" id="fechaHora" name="fechaHora">

input type="month"

Para seleccionar un mes y año.

				
					<label for="mes">Selecciona un mes:</label>
<input type="month" id="mes" name="mes">

input type="week"

Para seleccionar una semana dentro de un año.

				
					<label for="semana">Selecciona una semana:</label>
<input type="week" id="semana" name="semana">

Estas etiquetas ayudan a mejorar la accesibilidad y semántica del contenido al representar fechas y horas de manera más estructurada y adecuada.

El uso adecuado de las etiquetas HTML para fechas y horas no solo mejora la presentación de la información temporal, sino que también contribuye a una mejor experiencia de usuario y optimiza la compatibilidad con herramientas de accesibilidad y motores de búsqueda.

Al aplicar estas etiquetas y atributos correctamente, los desarrolladores pueden asegurarse de que sus páginas sean más comprensibles y fáciles de usar, permitiendo a los usuarios interactuar de forma eficiente con la información temporal presentada.

[pvc_stats postid="" increase="1" show_views_today="1"]