← 4.6.9 The abbr element – Table of contents – 4.6.11 The code element →

4.6.10 The time element

Categories:
Flow content.
Phrasing content.
Palpable content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes
datetime
DOM interface:
interface HTMLTimeElement : HTMLElement {
           attribute DOMString datetime;
};

The time element represents its contents, along with a machine-readable form of those contents in the datetime attribute. The kind of content is limited to various kinds of dates, times, time-zone offsets, and durations, as described below.

The datetime attribute may be present. If present, its value must be a representation of the element's contents in a machine-readable format.

A time element that does not have a datetime content attribute must not have any element descendants.

The datetime value of a time element is the value of the element's datetime content attribute, if it has one, or the element's textContent, if it does not.

The datetime value of a time element must match one of the following syntaxes.

A valid month string
<time>2011-11</time>
A valid date string
<time>2011-11-12</time>
A valid yearless date string
<time>11-12</time>
A valid time string
<time>14:54</time>

<time>14:54:39</time>

<time>14:54:39.92922</time>
A valid local date and time string
<time>2011-11-12T14:54</time>

<time>2011-11-12T14:54:39</time>

<time>2011-11-12T14:54:39.92922</time>

<time>2011-11-12 14:54</time>

<time>2011-11-12 14:54:39</time>

<time>2011-11-12 14:54:39.92922</time>
A valid time-zone offset string
<time>Z</time>

<time>+0000</time>

<time>+00:00</time>

<time>-0800</time>

<time>-08:00</time>
A valid global date and time string
<time>2011-11-12T14:54Z</time>

<time>2011-11-12T14:54:39Z</time>

<time>2011-11-12T14:54:39.92922Z</time>

<time>2011-11-12T14:54+0000</time>

<time>2011-11-12T14:54:39+0000</time>

<time>2011-11-12T14:54:39.92922+0000</time>

<time>2011-11-12T14:54+00:00</time>

<time>2011-11-12T14:54:39+00:00</time>

<time>2011-11-12T14:54:39.92922+00:00</time>

<time>2011-11-12T06:54-0800</time>

<time>2011-11-12T06:54:39-0800</time>

<time>2011-11-12T06:54:39.92922-0800</time>

<time>2011-11-12T06:54-08:00</time>

<time>2011-11-12T06:54:39-08:00</time>

<time>2011-11-12T06:54:39.92922-08:00</time>

<time>2011-11-12 14:54Z</time>

<time>2011-11-12 14:54:39Z</time>

<time>2011-11-12 14:54:39.92922Z</time>

<time>2011-11-12 14:54+0000</time>

<time>2011-11-12 14:54:39+0000</time>

<time>2011-11-12 14:54:39.92922+0000</time>

<time>2011-11-12 14:54+00:00</time>

<time>2011-11-12 14:54:39+00:00</time>

<time>2011-11-12 14:54:39.92922+00:00</time>

<time>2011-11-12 06:54-0800</time>

<time>2011-11-12 06:54:39-0800</time>

<time>2011-11-12 06:54:39.92922-0800</time>

<time>2011-11-12 06:54-08:00</time>

<time>2011-11-12 06:54:39-08:00</time>

<time>2011-11-12 06:54:39.92922-08:00</time>
A valid week string
<time>2011-W46</time>
A valid non-negative integer representing a year
<time>2011</time>
A valid duration string
<time>PT4H18M3S</time>

<time>4h 18m 3s</time>

The time element can be used to encode dates, for example in microformats. The following shows a hypothetical way of encoding an event using a variant on hCalendar that uses the time element:

<div class="vevent">
 <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
  <span class="summary">Web 2.0 Conference</span>:
  <time class="dtstart" datetime="2005-10-05">October 5</time> -
  <time class="dtend" datetime="2005-10-07">7</time>,
  at the <span class="location">Argent Hotel, San Francisco, CA</span>
 </div>

In the following snippet, the time element is used to encode a date in the ISO8601 format, for later processing by a script:

<p>Our first date was <time datetime="2006-09-23">a Saturday</time>.</p>

In this second snippet, the value includes a time:

<p>We stopped talking at <time datetime="2006-09-24T05:00-07:00">5am the next morning</time>.</p>

A script loaded by the page (and thus privy to the page's internal convention of marking up dates and times using the time element) could scan through the page and look at all the time elements therein to create an index of dates and times.

For example, this element conveys the string "Tuesday" with the additional semantic that the 12th of November 2011 is the meaning that corresponds to "Tuesday":

Today is <time datetime="2011-11-12">Tuesday</time>.

In this example, a specific time in the Pacific Standard Time timezone is specified:

Your next meeting is at <time datetime="2011-11-12T15:00-08:00">3pm</time>.