Expressing Date/Time Information with the <time> Element

gwagner's picture

While date/time information items have to be formated 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:

  1. Internally, for storage and computations, as a Date value.

  2. 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().

  3. 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 <time> element with the following example of a web page that includes two <time> 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="">
 <meta charset="UTF-8" />
 <title>Using the HTML5 Time Element</title>
function assignDate() {
  var dateEl = document.getElementById("today");
  var today = new Date();
  dateEl.textContent = today.toLocaleDateString();
  dateEl.setAttribute("datetime", today.toISOString());
window.addEventListener("load", assignDate);
 <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>

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 <time> element's datetime attribute and the localized representation as the text content of the <time> element:.