El elemento “tiempo” | Programar Plus

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?

(Visited 3 times, 1 visits today)