The `time` Element

CSS-Tricks

The `time` Element

The following is a guest post by Ty Strong. Ty noticed a curious lack of information on the <time> element here on CSS-Tricks and I agreed. Can't let that happen! Take it away Ty.

The <time> element in HTML represents a machine-readable date, time, or duration. It can be useful for creating event scheduling, archiving, and other time-based functions. WordPress uses the time element in the default theme. Reddit uses the time element as well.

Reddit using the <time> element for posting dates.

A Brief History

The time element has had a rocky road. It was added to the HTML5 specs back in 2009. Two years later in 2011, the spec was dropped and replaced with a much broader element, <data>. Later that year the time element was added back with some revamped features.

Rest assured, you can use it!

Bruce Lawson covers the situation well: gone, back, now. A classic "paving the cowpaths" moment in HTML history.

The Tag and Attribute

Time is just an HTML tag. Here's a simple example that represents November 2011:

<time>2011-11</time>

The text in there happens to be a valid datetime attribute value (more on that in a moment). But it doesn't have to be. You could move that text into a datetime attribute and use different text.

<time datetime="2011-11">A cold winter month many years ago</time>

The datetime attribute is what makes the time element unique. It represents the date, time, or duration for whatever text you are representing in a machine readable format. That means it is for computers, not humans, so it has very specific formats.

It's probably a bit more common for the human-readable version to be just a textual representation of the datetime:

<time datetime="2011-11">November, 2011</time>

10 Ways

There are a variety of standard ways to format the datetime attribute.

Year and Month

2014-06

Very Simple. Year before month.

Date

1969-07-16

Year, month, and then day.

Yearless Date

12-31

Month before day.

Time Only

14:54:39.929

Hour, minute, then seconds. Seconds is optional. Fractions of a second can be represented up to three digits.

Date and Time

2013-11-20T14:54

Combination of Date and Time, separated by a capital T. The capital "T" can be replaced with a space.

Time-Zone Offset

+06:00

Starts with plus or minus sign. Colon (:) is optional. +00:00, or UTC time, can be represented by the capital letter "Z".

Local Date and Time

2019-12-31T23:59:59-02:00

This is the same as Date and Time with an added time-zone offset. Again, "T" can be replaced with a space.

Year and Week

2010-W21

Year followed by a capital "W" with the corresponding number week.

Year Only

1776

This must be four digits or more, so `0001` and `12345` both work.

Duration (Method One)

P2DT2H30M10.501S

Capital "P", an optional day value, capital "T", then optional values of hours, minutes, and seconds. All letters must be upper-case.

Duration (Method Two)

1w 2d 2h 30m 10.501s

Week (w), Day (d), Hour (h), Minute (m), and Seconds (s). Letter can be upper-case or lower-case. Spaces are optional.

Examples

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>.

Having Trouble Formatting the Datetime?

Using this little tool you can input a certain date or time (or both), and it will output the correct datetime value.

See the Pen Datetime Creator Tool by Chris Coyier (@chriscoyier) on CodePen.

Browser Support

Browser support isn't a major concern with the time element. If a browser is familiar with it, great, if not, it will treat it as a generic inline element which is perfectly fine. The datetime attribute is also perfectly accessible.

There is a DOM interface associated with the time element though. Specifically dateTime should be available on a reference to that element.

<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>

This is only supported in Firefox, and isn't particularly useful anyway since all it does is return that attribute (it doesn't even return a value value if the attribute isn't there but the text is a valid value, which seems like it would make sense.)

What is the benefit to using <time>?

I'm going to quote Bruce again because he says it very well in a post on HTML5 Doctor:

The uses of unambiguous dates in web pages aren’t hard to imagine. A browser could offer to add events to a user’s calendar. A Thai-localised browser could offer to transform Gregorian dates into Thai Buddhist era dates. A Japanese browser could localise <time>16:00</time> to "16:00時". Content aggregators can produce visual timelines of events.

Search engines can produce smarter search results. For example, in the recent heavy snow in the UK, I searched for school closures in my town and discovered my kids’ school was closed. After receiving a phone call from the school asking me where my kids were, I re-examined the webpage. In small print at the bottom of the page were the words "Published 5 January 2008". I expect that operators of search engines would rank more current pages more highly on searches connected with current events.

Other Bits

A further touch you can do to the time element is adding a title attribute to expose more detailed information to the user. Meaning you can offer the same bit of information three ways:

• A nice human-readable display format


• A more detailed human-readable hover format


• A machine-readable format

This is in use on CodePen:

This is the Rails code that outputs those different formats (STRFTIME is a nice tool for that):

<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>

Are you using <time> on any of your projects?

---

The `time` Element is a post from CSS-Tricks

more info...