Expressing Date/Time Information with the <time> Element

Gerd Wagner

4.60/5 (3 votes)

Jan 29, 2015

CPOL

2 min read

11119

Using the HTML5 element allows to express a human-readable date or a timestamp in a web page, and annotate it with a machine-readable date/time value that can be extracted and processed by applications.

While date/time information items have to be formatted as strings in a human-readable form on web pages, preferably in localized form based on the settings of the user's browser, it's not a good idea to store date/time values in this form. Rather, we use instances of the pre-defined JavaScript class Date for representing and storing date/time values. In this form, the pre-defined functions toISOString() and toLocaleDateString() can be used for turning Date values into ISO standard date/time strings (of the form "2015-01-27") or to localized date/time strings (like "27.1.2015"). Notice that, for simplicity, we have omitted the time part of the date/time strings.

In summary, a date/time value is expressed in three different forms:

Internally, for storage and computations, as a Date value.
Internally, for annotating localized date/time strings, or externally, for displaying a date/time value in a standard form, as an ISO standard date/time string, e.g., with the help of toISOString().
Externally, for displaying a date/time value in a localized form, as a localized date/time string, e.g., with the help of toLocaleDateString().

When a date/time value is to be included in a web page, we can use the <time> element that allows to display a human-readable representation (typically a localized date/time string) that is annotated with a standard (machine-readable) form of the date/time value.

We illustrate the use of the element with the following example of a web page that includes two elements: one for displaying a fixed date, and another (initially empty) element for displaying the date of today, which is computed with the help of a JavaScript function. In both cases, we use the datetime attribute for annotating the displayed human-readable date with the corresponding machine-readable representation.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="UTF-8" />
 <title>Using the HTML5 Time Element</title>
 <script>
function assignDate() {
  var dateEl = document.getElementById("today");
  var today = new Date();
  dateEl.textContent = today.toLocaleDateString();
  dateEl.setAttribute("datetime", today.toISOString());
}
window.addEventListener("load", assignDate);
 </script>
</head>
<body>
 <h1>HTML5 Time Element</h1>
 <p>HTML 2.0 was published on 
    <time datetime="1995-11-24">24.11.1995</time>.</p>
 <p>Today is <time id="today" datetime=""></time>.</p>
</body>
</html>

After this web page is loaded, the JavaScript function assignDate() is executed. It computes today's date as a Date value and assigns the ISO standard representation to the element's datetime attribute and the localized representation as the text content of the element.

Read more about web engineering on web-engineering.info.