La siguiente es una publicación invitada de Ty Strong. Ty notó una curiosa falta de información en el <time>
elemento aquí en Programar Plusy estuve de acuerdo. ¡No puedo dejar que eso suceda! Llévatelo Ty.
El <time>
elemento en HTML representa una fecha, hora o duración legible por máquina. Puede resultar útil para crear la programación de eventos, el archivo y otras funciones basadas en el tiempo. WordPress usa el elemento de tiempo en el tema predeterminado. Reddit también usa el elemento de tiempo.
Reddit usando el <time>
elemento para publicar fechas.
Una breve historia
El elemento tiempo ha tenido un camino rocoso. Se agregó a las especificaciones de HTML5 en 2009. Dos años después, en 2011, la especificación se eliminó y se reemplazó por un elemento mucho más amplio, <data>
. Más tarde ese año, el elemento de tiempo se agregó nuevamente con algunas características renovadas.
¡Tenga la seguridad de que puede usarlo!
Bruce Lawson cubre bien la situación: se fue, regresó, ahora. Un momento clásico de “pavimentar los caminos de las vacas” en la historia del HTML.
La etiqueta y el atributo
El tiempo es solo una etiqueta HTML. Aquí hay un ejemplo simple que representa noviembre de 2011:
<time>2011-11</time>
El texto allí resulta ser un válido datetime
valor de atributo (más sobre eso en un momento). Pero no tiene por qué ser así. Podrías mover ese texto a un datetime
atributo y utilizar texto diferente.
<time datetime="2011-11">A cold winter month many years ago</time>
El datetime
El atributo es lo que hace que el elemento de tiempo sea único. Representa la fecha, hora o duración de cualquier texto que esté representando en un formato legible por máquina. Eso significa que es para computadoras, no para humanos, por lo que tiene formatos muy específicos.
Probablemente sea un poco más común que la versión legible por humanos sea solo una representación textual de la fecha y hora:
<time datetime="2011-11">November, 2011</time>
10 formas
Hay una variedad de formas estándar de formatear datetime
atributo.
Año y mes
2014-06
Muy simple. Año antes mes.
Fecha
1969-07-16
Año, mes y luego día.
Fecha sin año
12-31
Mes antes del día.
Tiempo solo
14:54:39.929
Hora, minuto, luego segundos. Los segundos son opcionales. Las fracciones de segundo se pueden representar con hasta tres dígitos.
Fecha y hora
2013-11-20T14:54
Combinación de fecha y hora, separados por una T mayúscula. La “T” mayúscula se puede reemplazar con un espacio.
Desplazamiento de zona horaria
+06:00
Empieza con el signo más o menos. Los dos puntos (:) son opcionales. +00: 00, o la hora UTC, se puede representar con la letra mayúscula “Z”.
Fecha y hora local
2019-12-31T23:59:59-02:00
Es lo mismo que la fecha y la hora con un desplazamiento de zona horaria adicional. Nuevamente, “T” se puede reemplazar con un espacio.
Año y semana
2010-W21
Año seguido de una “W” mayúscula con el número correspondiente a la semana.
Solo año
1776
Debe tener cuatro dígitos o más, por lo que tanto “0001” como “12345” funcionan.
Duración (método uno)
P2DT2H30M10.501S
“P” mayúscula, un valor de día opcional, “T” mayúscula, luego valores opcionales de horas, minutos y segundos. Todas las letras deben estar en mayúsculas.
Duración (método dos)
1w 2d 2h 30m 10.501s
Semana (w), Día (d), Hora (h), Minuto (m) y Segundos (s). La letra puede ser mayúscula o minúscula. Los espacios son opcionales.
Ejemplos de
Google released Gmail Blue on <time datetime="2013-04-01">April 1st, 2013</time>.
The Chelyabinsk meteor entered Earth's atmosphere over Russia on <time datetime="2013-02-15T09:20+06:00">15 February 2013 at about 09:20 YEKT (03:20 UTC)</time>.
The Apollo 13 mission lasted a total of <time datetime="5d 22h 54m 41s">5 days, 22 hours, 54 minutes, and 41 seconds</time>.
¿Tiene problemas para formatear la fecha y hora?
Con esta pequeña herramienta, puede ingresar una fecha u hora determinada (o ambas), y generará el valor de fecha y hora correcto.
Consulte la herramienta Pen Datetime Creator de Chris Coyier (@chriscoyier) en CodePen.
Soporte del navegador
La compatibilidad con el navegador no es una preocupación importante con el elemento de tiempo. Si un navegador está familiarizado con él, genial, si no, lo tratará como un elemento genérico en línea que está perfectamente bien. El atributo datetime también es perfectamente accesible.
Sin embargo, hay una interfaz DOM asociada con el elemento de tiempo. Específicamente dateTime
debe estar disponible en una referencia a ese elemento.
<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
<script>
var time = document.getElementsByTagName("time")[0];
console.log(time.dateTime);
// outputs "2001-05-15 19:00"
</script>
Esto solo es compatible con Firefox, y no es particularmente útil de todos modos, ya que todo lo que hace es devolver ese atributo (ni siquiera devuelve un valor de valor si el atributo no está allí, pero el texto es un valor válido, que parece tendría sentido.)
¿Cuál es el beneficio de usar
Voy a citar a Bruce nuevamente porque lo dice muy bien en una publicación sobre HTML5 Doctor:
Los usos de fechas inequívocas en páginas web no son difíciles de imaginar. Un navegador podría ofrecer agregar eventos al calendario de un usuario. Un navegador localizado en tailandés podría ofrecer transformar las fechas gregorianas en fechas de la era budista tailandesa. Un navegador japonés podría localizar <time>16:00</time>
a “16:00 時”. Los agregadores de contenido pueden producir líneas de tiempo visuales de eventos.
Los motores de búsqueda pueden producir resultados de búsqueda más inteligentes. Por ejemplo, en la reciente nevada intensa en el Reino Unido, busqué cierres de escuelas en mi ciudad y descubrí que la escuela de mis hijos estaba cerrada. Después de recibir una llamada telefónica de la escuela preguntándome dónde estaban mis hijos, volví a examinar la página web. En letra pequeña al pie de la página estaban las palabras “Publicado el 5 de enero de 2008”. Espero que los operadores de los motores de búsqueda clasifiquen las páginas más actuales de manera más alta en las búsquedas relacionadas con eventos actuales.
Otros bits
Un toque adicional que puede hacer al elemento de tiempo es agregar un atributo de título para exponer información más detallada al usuario. Lo que significa que puede ofrecer la misma información de tres formas:
- Un buen formato de pantalla legible por humanos
- Un formato de desplazamiento más detallado y legible por humanos
- Un formato legible por máquina
Esto está en uso en CodePen:
Este es el código de Rails que genera esos diferentes formatos (STRFTIME es una buena herramienta para eso):
<time
datetime="<%= @pen.created_at.strftime("%Y-%m-%dT%H:%M") %>"
title="<%= @pen.created_at.strftime("%Y-%m-%d at %I:%M %p") %>">
<%= @pen.created_at.strftime("%B %d, %Y") %>
</time>
Estas usando <time>
en alguno de tus proyectos?