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

No Comments
Comments to: The `time` Element

Recent Articles

Good Reads

Losing weight can be⁣ a ​challenge for women going through menopause. With ‌all ‌the changes happening in your body, it may seem like an impossible task. However, it is important to focus on managing your weight during this time to avoid obesity in ⁣the future. Understanding Weight Gain During Menopause Before we dive into tips […]
Imagine if treating gum disease could be less‍ painful and more like a futuristic ⁣adventure. That’s where laser gum⁣ surgery comes⁤ in – ⁣the high-tech solution that’s transforming dental treatments into something straight out of a sci-fi movie. No scalpels or‍ bleeding gums here, just lasers and the promise of healthier gums. If ‍you’re tired […]

Worlwide

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]
Losing weight can be⁣ a ​challenge for women going through menopause. With ‌all ‌the changes happening in your body, it may seem like an impossible task. However, it is important to focus on managing your weight during this time to avoid obesity in ⁣the future. Understanding Weight Gain During Menopause Before we dive into tips […]
Imagine if treating gum disease could be less‍ painful and more like a futuristic ⁣adventure. That’s where laser gum⁣ surgery comes⁤ in – ⁣the high-tech solution that’s transforming dental treatments into something straight out of a sci-fi movie. No scalpels or‍ bleeding gums here, just lasers and the promise of healthier gums. If ‍you’re tired […]
The festive season is a time for businesses to express their gratitude towards‌ their clients, employees, and partners who have contributed to a​ successful year. While corporate gifting has always ‍been‍ a tradition, companies are now looking for unique and ⁢personalized gifts that reflect their appreciation. Instead of settling for generic mass-produced items, why not […]

Trending

Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]
Singapore is recognised globally as a prime destination for foreign investors. Its business structure is well-developed, and its tax system is favourable to business owners. The government has a strong support system for entrepreneurs and provides legal protection for intellectual property rights. All of these conditions create an environment that is ideal for Singapore company […]
2020 has been a year that represents aggressive and sustained volatility with a confluence of unexpected situations, including economic shifts and market disturbance confluence. The COVID-19 pandemic forces businesses to adjust their methods of operations to ensure survival. These adjustments become the trajectory and guidance of what 2021 should look like and what companies should […]
COVID-19 pandemic has affected Thailand’s economy and labor market. World Bank’s Thailand Economic Monitor predicted that it would take Thailand over two years to return to its pre-COVID-19 growth and domestic product output levels. Although the country has successfully curbed the pandemic tide over the last few months, the economy remains severely hit. Nevertheless, heavily […]