Hemos hablado en algunas ocasiones de que HTML5 es un lenguaje semántico. Esto se hace muy importante, ya que un sitio web bien desarrollado y habiendo trabajado el aspecto semántico, será un sitio web que los buscadores sepan interpretar de manera correcta. Lo cual por supuesto, va a repercutir en que dichos buscadores, nos asignen buenos puestos en los resultados de las búsquedas.
En esta ocasión, vamos a aprender a usar y definir fecha y hora con la etiqueta <time>. Con la etiqueta <time> podemos definir, fechas de nacimiento, días de fiesta, marcar el inicio de un evento y su finalización o cualquier otro contenido relacionado con el tiempo. Puede parecer que esto no es para nada importante, pero mejora considerablemente los resultados en los motores de búsqueda, como os he comentado anteriormente o las características personalizadas como los recordatorios. El objetivo es que el indexado y el rastreo se realice de manera más sencilla, ya sea por buscadores o aplicaciones.
El formato correcto en un sitio web para la fecha es AAAA-MM-DD y el formato correcto para la hora es HH:MM:SS. Sabiendo esto, vamos a ver una serie de ejemplos con los que vamos a saber usar y definir fecha y hora con la etiqueta <time> de manera correcta.
En el siguiente ejemplo, estamos especificando una fecha. Pero el navegador aun no sabe a que fecha concreta nos referimos, ya que aunque hemos definido la etiqueta <time>, no hemos concretado una fecha.
<p>Iremos a jugar al fútbol el <time>Martes</time></p>Para ello vamos a utilizar un atributo llamado datetime="", en el cual colocaremos la fecha correspondiente al Martes. Vemos un ejemplo con el que os va a quedar más claro.
<p>Iremos a jugar al fútbol el <time datetime="2018-06-30">Martes</time></p>En el siguiente ejemplo estamos definiendo una fecha para el usuario y otra para los buscadores y rastreadores. Con esto conseguimos un mejor indexado de nuestro sitio.
<p>Llegaré a España el <time datetime="2018-10-18">15 de Octubre del 2018</time></p>Nos encontraremos con situaciones donde no conoceremos la fecha exacta y solamente conocemos el mes y el año. Con lo cual debemos omitir el valor del día.
<p>Llegare en <time datetime="2014-06">Junio de 2019</time></p>A continuación vamos a ver como definir la hora con la etiqueta <time>.
<p>Iré a la playa a las <time datetime="17:00">5 de la tarde</time></p>También podemos definir la fecha y la hora en una misma frase y el formato correcto sería el siguiente:
<p>Jugaremos a las <time datetime="2019-01-20T08:00">8 del Domingo por la mañana</time></p>Nos vamos a encontrar con situaciones donde necesitaremos definir el tiempo a nivel mundial. Para estos casos, colocaremos la Z (mayúscula) al final del valor de datetime="2019-01-20T08:00Z". Con esto conseguimos que los bots entiendan que nos referimos a un horario mundial y no a una hora local.
<p>La hora del planeta será <time datetime="2019-06-30T20:00Z">hoy a las 8pm</time> en todo el mundo</p>Si queremos que aparezca la fecha cuando colocas el cursor sobre la fecha que esta encerrada por la etiqueta <time>, puedes asignar el atributo title="". Esto es una ayuda visual que los lectores de pantalla agradecen enormemente.
<p>La hora del planeta será <time datetime="2019-06-30T20:00Z" title="2019-06-30T20:00Z">hoy a las 8pm</time> en todo el mundo</p>
Conclusiones
Nada más por ahora y os recuerdo que justo debajo, tenéis el listado de las clases que llevamos hasta la fecha. Me gustaría que compartieses esta publicación con tus amigos, nos regales un me gusta en la página de Facebook y si te apetece únete a la comunidad de Facebook.
0 Comentarios