Time is on your side

A couple of weeks ago creative technologist extraordinaire Henry Desroches posed the following question on Twitter…

what’s ur favorite rare HTML tag (repeats get executed, let the games begin) — @xdesro

I answered <time> (although I also like <hr> and <mark> quite a bit).

What is <time> and why should you use it? Henry sums it up nicely…

perfect for communicating in both human-readable language and machine-readable language. bilingual cyborg stuff — @xdesro

MDN summarizes…

The <time> HTML element represents a specific period in time. It may include the ‘datetime’ attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders. — MDN

Cool. But how do you use it?

I use <time> on this site for publish dates. If you inspect any of the “Published on” dates, you’ll see something like this:

<time datetime="2021-09-07T00:00:00.000Z">September 07, 2021</time>

There are a variety of formats that can be used for datetime. I’m using ISO date (2021-09-07) and global time (T00:00:00.000Z), which in this example is midnight UTC. More on that in a bit.

There are several of ways to add a date to your posts. Per the Eleventy Content Dates page you can add a date key to your post’s Front Matter.

title: "My cool post on using the time element with Eleventy"
date: 2021-11-16

About the previously mentioned midnight datetime output, if you don’t include time with your date Eleventy will assume midnight UTC. More about UTC in the Time Zones section.

If you don’t explicitly add the date, Eleventy will look for a date in the file path and use the first one it finds. If there’s no date present in the path it will use the file creation date (which will include a time!).

I use Luxon to handle date formatting. It’s fairly straightforward and offers a variety of formats. To use Luxon you’ll install it and then add some filters to your .eleventy.js file.

npm install luxon

I picked up the filter approach from the excellent Learn Eleventy from Scratch course, but have since switched to Luxon given that Moment is now maintenance mode. The general approach is still the same. Create two filters, one to display the date and one to use in the datetime attribute.

In your .eleventy.js file add the following

const { DateTime } = require('luxon');

And then in the module.exports section of eleventy.js…

  eleventyConfig.addFilter('longDate', dateObj => {
    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('LLLL dd, yyyy');
  });

  eleventyConfig.addFilter('w3Date', dateObj => {
    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toISO();
  });

The longDate filter displays the date as “November 16, 2021” and the w3date filter displays the date in a machine readable format.

Post listing pages use…

Published on <time datetime="{{ item.data.page.date | w3Date }}">{{ item.data.page.date | longDate }}</time>

Individual posts use…

<time datetime="{{ page.date | w3Date }}" class="dt-published">{{ page.date | longDate }}</time>

If you look at the top of this page you’ll see the output.

Al Power has a slightly different approach to formatting using Luxon’s presets if you’re interested.

As mentioned above, Eleventy assumes UTC for date and time unless you specify otherwise. If you look at the filters above you’ll notice the zone is set to UTC. Luxon gives you some options on how to specify zone.

For example, you could specify your local time zone by changing zone to zone: 'local' or more explicitly zone: 'America/New York' in my case. However, this approach is not recommended as it can cause your dates to be a day off.

The Eleventy documentation explains…

Many date formats in Eleventy (when set in your content‘s filename as YYYY-MM-DD-myfile.md or in your front matter as date: YYYY-MM-DD) assume midnight in UTC. When displaying your dates, make sure you’re using the UTC time and not your own local time zone, which may be the default. — Eleventy

There are plenty of ways to format your dates with Luxon. For displaying dates on the site I’ve gone with LLLL dd, yyyy as a token which outputs November 16, 2021. You can peruse the lengthy table of tokens as well as presets to find your preferred format.

For datetime I’ve used .toISO(), which will output ISO standard date and time. If you wanted to use date without time you could use .toISODate. Week or time only are other options that aren’t a good a choice for a post’s publish date, but could be handy for other scenarios.

Can you use <time> without including datetime? Absolutely. You can wrap any date or time and get the benefit as long as you’re using valid values.

<p>I started working on the web in <time>1996</time>.</p>
<p>I can barely wait until <time>11:00</time> to eat lunch.</p>

The <time> tag makes a crucial bit of information about your post understandable to both humans and machines. You know, bilingual cyborg stuff.

Search engines are the most ubiquitous use case. You want people to be able to find your posts, and <time> can help ensure that.

From the Bing Webmaster tools help & how-to…

Use HTML5 semantic elements as they have am intrinsic meaning to browser, developer and search engine, especially use the following HTML5 Semantic Elements: <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <ection>, <summary>, <time>. — Bing Webmaster Tools

IndieWeb participation is another benefit of using <time>. The basic premise of IndieWeb is that you should own and control your content rather than relying only on third party services.

For example, instead of posting only on a platform like Medium or Dev.to, you would post on your own site and syndicate out to third parties (or not!).

When you post something on the web, it should belong to you, not a corporation. Too many companies have gone out of business and lost all of their users’ data. By joining the IndieWeb, your content stays yours and in your control. — IndieWeb.org

Owning your own site is one element of IndieWeb. There are plenty of other aspects and ways to participate. Webmentions are the most well known, but you can also sign-in to sites using your own domain with IndyAuth and take part in the Homebrew Website Club, an active worldwide community with many chapters.

An easy way to get started is to use microformats to markup your posts, which makes them easier to syndicate to other sites.

h-entry is a simple, open format for episodic or datestamped content on the web. h-entry is often used with content intended to be syndicated, e.g. blog posts. h-entry is one of several open microformat standards suitable for embedding data in HTML. — Microformats.org

In fact I added both h-entry and h-card to my site as a result of researching for this post! Previously I had only been aware of Webmentions, so I’m happy to take some steps towards IndieWeb participation.

Back to <time>, there are four properties that h-entry needs at a minimum to be valid.

• The overall content needs to be indicated
• The name of the post
• The canonical url
• The datetime the post was published

Properties are marked using class names.

The ‘dt-published’ property should be a <time> element so that you can take advantage of HTML5’s “datetime” property. — Microformats.org

If you recall the code example earlier used in the post layout to display date, the dt-published property is included.

<time datetime="2021-11-16T23:00:00.000Z" class="dt-published">November 16, 2021</time>

Here’s an example of my previous post at h-entry validator at IndieWebify.me. In-depth information and examples can be found at the h-entry page at the Microformats wiki.

Time-based events are another way that <time> can be useful. Having machine-readable time elements makes things like adding an event to your calendar or viewing an event’s schedule in your local time zone possible. You can see examples of both such features at THE Eleventy Meetup site!

The <time> tag is a great addition to your site even if you don’t participate in IndieWeb. It handily won round one in Laurie Voss’ impromptu HTML madness bracket game, although it didn’t fare as well in round two and did not move on to round three.

Update: The results are in! <a>, the humble workhorse in use since Web 1.0, cruised to an easy victory over the deprecated <marquee>.

• HTML Goodies - It’s Time for an HTML5 Time Tag
• IndieWebify.me - A guide to getting you on the IndieWeb
• Why IndieWeb
• Timestamp converter - Useful for troubleshooting the “day behind” problem
• Max Böck - Using Webmentions in Eleventy
• Sia Karamelegos - An in-depth tutorial on Webmentions and Eleventy
• Amber Wilson - Grow the IndieWeb with Webmentions
• Evan Sheehan - Webmentions: Joining the IndieWeb
• Ben Myers - On the dl - A look at another useful semantic HTML element