HTML5 “time” Tag

Perm url with updates: http://xahlee.org/js/html5_time_tag.html

HTML5 “time” Tag

Xah Lee, 2011-07-03

The “time” tag is used to represent date/time combination. Examples:

<footer>Published <time pubdate datetime="2011-07-03">07/03</time>.</footer>
I need this <time datetime="2011-07-03T12:28:57-07:00">now</time>!
Captain's log, date <time>2011-07-03T12:51:02-07:00</time>.

Note: if you do not include the “datetime” attribute, then your “time” tag's content must follow the same format used by the “datetime” attribute.

“datetime” Attribute

“datetime” attribute encodes the precise date or date/time. The format must be exact, and must include at least “yyyy-mm-dd”. (time info is optional) Examples:

… mom's birthday <time datetime="2011-07-03">July 3rd</time> …
… had piano lesson at <time datetime="2011-07-03T13:00">1 pm</time> …
… the bomb went off at <time datetime="2011-07-03T12:46:03-07:00">12:46:03 PST</time> …

The “datetime” attribute is optional. But if not present, then the “time” tag's content must use the the same fomat used by “datetime” attribute. e.g. yyyy-mm-ddThh:mm:ss-hh:mm.

Sample Correct Formats

  • 2011-07-03
  • 2011-07-03T12:58
  • 2011-07-03T12:58:46

global datetime stamp (with UTC offset)

  • 2011-07-03T12:58-07:00
  • 2011-07-03T12:58:46-07:00
  • 2011-07-03T12:58:46.31-07:00

Wrong Examplez

  • Wrong! <time>today</time>
  • Wrong! <time>July 3</time>
  • Wrong! <time>07/03/11</time>
  • Wrong! <time>Sun Jul 03 13:20:16 2011</time> (incorrect format)
  • Wrong! <time>12:50</time> (requires “yyyy-mm-dd” at least)

“pubdate” Attribute

“pubdate” boolean attribute can be included. If present, that means your time tag represent the time your article is published. Example:

<time pubdate>2011-07-03T13:05:28-07:00</time>
<time pubdate datetime="2011-07-03T13:05:28-07:00">July 03</time>

Note that “pubdate” does not take any values. It is wrong to say pubdate="…".

Back to HTML5 Tags.

Popular posts from this blog

Browser User Agent Strings 2012

11 Years of Writing About Emacs

does md5 creates more randomness?