HTML5 “time” Tag

, , …,

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

Example:

<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, like this yyyy-mm-dd hh:mm:ss-hh:mm. (see below for detail.)

「datetime」 Attribute

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

Examples:

<!-- 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
syntaxcomment
13:58hour+minutes. (24hour format allowed only)
13:58:46hour+minutes+second
3h 16m 19sduration
07-03month+date.
2011year.
2011-07year+month.
2011-07-03year+month+date
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: http://www.w3.org/TR/html51/text-level-semantics.html#the-time-element

Incorrect Use of Time Tag

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

<time>today</time>
<!-- incorrect format -->

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

<time>07/03/11</time>
<!-- incorrect format -->

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

Reference

http://www.w3.org/TR/html51/text-level-semantics.html#the-time-element

thanks to Manuel Strehl for correction.

blog comments powered by Disqus