Horario de atención: De Lunes a Sábado de 10:00 a.m. a 6:00 p.m. ✨🚀
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.
