HTML5 “time” Tag

By Xah Lee. Date: . Last updated: .

The time tag is used to represent date, time, date+time, duration.


<p>Captain's log, <time>2011-07-03</time>.</p>
<p>Captain's log, <time>2011-07-03 12:51:02-07:00</time>.</p>
<p>I had lunch at <time>13:58</time>.</p>

Here's another example, with the optional datetime attribute:

<p>I need this <time datetime="2011-07-03 12:28:57-07:00">now</time>!</p>

The datetime attribute is optional. But if not present, then the time tag's content must use the same fomat used by datetime attribute.

「datetime」 Attribute

datetime attribute's value is a machine-readable date/time format.


<!-- date only -->
mom's birthday <time datetime="2011-07-03">July 3rd</time>
<!-- date and time -->
meeting at <time datetime="2011-07-03 13:00">1 pm</time>
<!-- full date time -->
conference <time datetime="2011-07-03 12:46:03-07:00">12:46:03 PST</time>

「datetime」 Attribute Formats

Following are examples of valid datetime formats:

Sample 「datetime」 Attribute Values
13:58hour+minutes. (must be 24hours format)
3h 16m 19sduration
2011-07-03 13:58with time.
2011-07-03 13:58:46with seconds.
2011-07-03 13:58-07:00with UTC offset, but no seconds.
2011-07-03 13:58:46-07:00with UTC offset, and with seconds.

The space between {date, time} can also be T. Example: 2011-07-03T13:58

The above are the most commonly needed format. The spec also allow {fraction of second, time zone only, year+week, duration}. For detail, see:

Incorrect Use of Time Tag

<!-- incorrect use of time tag -->

<!-- incorrect format -->

<time>July 3</time>
<!-- incorrect format -->

<!-- incorrect format -->

<time>Sun Jul 03 13:20:16 2011</time>
<!-- incorrect format -->


thanks to Manuel Strehl for correction.

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon