HTML5 time tag usage

Question

Can I use HTML time tag as below?

<time>9:09 PM</time>

My confusion is around the "PM" , whether I can specify it like this OR time is only for displaying 24 hr clock.

Answer 1

According to the W3C definition of the <time> tag, any content which represents a time without specifying also a day must be a valid time-string which it defines as follows:

1.Two ASCII digits, representing hour, in the range 0 ≤ hour ≤ 23

2.A ":" (U+003A) character

3.Two ASCII digits, representing minute, in the range 0 ≤ minute ≤ 59

4.Optionally (required if second is non-zero):

1.A ":" (U+003A) character

2.Two ASCII digits, representing the integer part of second, in the range 0 ≤ s ≤ 59

3.Optionally (required if second is not an integer):

1.A 002E FULL STOP character (.)

2.One, two, or three ASCII digits, representing the fractional part of second

So no, the 12-hour time format is non-standard. The purpose of the semantic tags in HTML5 is to make the document machine-readable, which means when you want the tags to serve their purpose, you need to follow the standard accurately. In this case the standard does not allow any AM or PM.

However, when you use the datetime-attribute of the time-tag, you can write anything you like into the text content, because in that case the datetime will be considered the machine-readable version and the text-content the human-readable version. So this:

<time datetime="21:09">9:09 PM</time>

would be valid, and so would be

<time datetime="21:09">a few minutes past nine in the evening</time>

Answer 2

See http://www.w3.org/html/wg/drafts/html/CR/text-level-semantics.html#the-time-element:

A time consists of a specific time with no time-zone information, consisting of an hour, a minute, a second, and a fraction of a second.

Examples in the draft include

<time>14:54</time>

where others show datetime is needed for alternative notations:

<p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
<p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
<p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>

<FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-10-21T18:26-07:00">on 2009/10/21 at 6:26pm</TIME></P>
</FOOTER>