HTML element

The <time> element is a date, time, or time period represented in a machine-readable format. It can be useful for creating schedules, archives or other functions related to time. WordPress uses this element in the basic theme. Another example of using <time> is Reddit:

Short story

The life path of this element was not easy. It was added to the HTML5 specification in 2009. Two years later, in 2011, it was removed and replaced with a much wider <data>. However, in the same year he was returned and added new features. Now you can use it with confidence.
')
The situation was well described by Bruce Lawson ( removed , returned , the current state of affairs ). [ The same story on Habré: removed , returned ]. A classic example of how the reaction of the developer community affects the development of HTML.

Tag and attribute

<time> can be used as a regular HTML tag. Here is a simple example that presents November 2011:

 <time>2011-11</time> 

In this example, the text inside the tag is the valid value of the datetime attribute (which will be discussed in more detail later). However, this is completely optional. This value can be moved to the attribute specified explicitly, and arbitrary text can be used inside the tag:

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

It is the datetime attribute that gives this element its unique properties. It represents in the machine-readable form any date, time or interval relating to the text inside the tag. Since it is intended for computers, its format is strictly defined.

In most cases, the text enclosed in a tag represents the same time in a readable form:

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

10 ways to specify the time

There are many types of datetime formatting.

Year and month

 2014-06 

Very simple: the year is coming before the month.

date

 1969-07-16 

Year, then month, then day.

Date without year

 12-31 

Month, then day.

Only time

 14:54:39.929 

Hours, minutes, seconds. Seconds are optional. The fractions of a second are indicated to the third digit.

date and time

 2013-11-20T14:54 

The combination of date and time, separated by a capital "T". The letter "T" can be replaced by a space.

Timezone

 +06:00 

Starts with a plus or minus. The colon is optional. Coordinated Universal Time (UTC, +00: 00) can be replaced with the capital “Z”.

Local Date and Time

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

Date and time with the time zone, instead of "T" you can use a space.

Year and week

 2010-W21 

The year, then the capital "W" and the number of the week.

Only year

 1776 

Must be four or more digits. Examples of valid values ​​are "0001" , "12345" .

Time interval (the first method)

 P2DT2H30M10.501S 

"P", then optional - the number of days, "T", then optional - the number of hours, minutes and seconds. All letters in upper case only.

Time interval (second method)

 1w 2d 2h 30m 10.501s 

Weeks, days, minutes, seconds. Letters can be in any 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>. 

Problems with datetime formatting?

This small form on CodePen helps convert date and time values ​​to a valid <time> :

Support in the brouzer

The <time> element has no browser support issues. If the browser is familiar with the element, it will process it; if not, it will perceive it as an unknown inline element, which suits us perfectly. The datetime attribute is also easily accessible.

There is also a DOM interface associated with the <time> element. You can get the dateTime value via the element reference:

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

However, its support is only in Firefox, and there is little benefit from it, since it simply returns the value of the datetime attribute, and it doesn’t even know how to recognize the correct time values ​​inside the tag, which would be logical enough.

What are the advantages of using <time>?

Here I will quote Bruce Lawson, as, perhaps, you can’t say better:

Options for the use of a clear date to come up with it is not difficult. The browser can prompt the user to add an event on the page to his calendar. Thailand’s browser can automatically convert the date in the Gregorian calendar to a traditional Buddhist calendar. A Japanese browser may show <time>16:00</time> as "16:00". Content aggregators can automatically generate a timeline of events.

Search engines can improve issue results. For example, recently there was a heavy snowfall, I googled and found that the school my children go to is closed today. It was only when the school called and asked why my children did not come, I found that at the bottom of the page with the news about the closure of the school is written in small print: "Published on January 5, 2008". Search engines could well have recent events higher in the issue.

Another useful little thing

You can further improve the <time> element by adding the title attribute, in which you specify more detailed information. That is, time data can be presented in three forms at once:

• In a readable form inside the tag;
• In a more detailed form in a tooltip;
• In machine readable format.

This technique is used on the CodePen website:



Here is a sample code for Rails that displays time in these three views:

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