El elemento time en HTML5 permite expresar una fecha y una hora permitiendo que los buscadores sean capaces de filtrar resultados basados en tiempo. Por ejemplo, un resultado puede recibir más o menos importancia por el algoritmo de búsqueda si fue el primero en publicarse.
Fue creado específicamente para que las máquinas pueden leer fechas y horas que si podemos comprender los humanos.
En este caso
1 |
<p>La próxima conferencia de TED será el 10 de mayo de este año</p> |
Nosotros podemos entender perfectamente cuando el evento tendrá lugar. Sin embargo, una máquina no. Por ello es preciso dárselo un poco más masticado
1 |
<p>La próxima conferencia de TED será el <time datetime="2016-05-10">10 de mayo de este año</time></p> |
El truco está en el valor del datetime. En él se escribe la fecha forma que la máquina pueda entenderlo pero, lo que se muestra es una fecha con una representación ambigua.
También se podría añadir la hora de la siguiente forma
1 2 |
<p>La próxima conferencia de TED será el <time datetime="2016-05-10T17:30:34.014Z">10 de mayo de este año</time></p> |
El T se usa para indicar cuando empieza la hora. Tiene un formato de HH:MM:SS con los milisegundos con un punto decimal. El Z es opcional e indica si ese hora está dentro del UTC (tiempo universal coordinado) que es similar al famoso GMT (Tiempo medio Greenwich). Se puede indicar una zona horaria con añadir el número de horas y un más o un menos.
1 2 |
<p>La próxima conferencia de TED será el <time datetime="2016-05-10T17:30:34.014-04:00">10 de mayo de este año</time></p> |
Reglas para su uso
- El elemento time no se usa para codificar tiempos como por ejemplo el último invierno.
- La fecha representada tiene que seguir el calendario Gregoriano.
- El atributo datetime tiene que tener un string de fecha válido.
- Si el elemento time no tiene el atributo datetime, el texto que contiene time tiene que ser un string de fecha válido.
Y hasta aquí el tutorial de hoy. Espero que os sirva de ayuda. A seguir picando 🙂