The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.

For instance, you can do this to indicate a specific date.

We were celebrating our daugther's <time datetime="2004-07-13">birthday</time> in that seafood restaurant.

In the example below, since the time value is exposed to user in 24 hour format, we do not need "datetime" attribute to further specify the time value.

I usually go swimming at <time>20:00</time> every Saturday.

Using a styling technology that supports restyling times, the sentence above can be

"I usually go swimming at 8pm every Saturday."


"I usually go swimming at 20h00 every Saturday."

On the hand, if the time value is not exposed in 24 hour format, you will have to specifically encode it in "datetime" attribute in 24 hour format.

We are open Monday to Friday from <time datetime="08:00">8am</time> through <time datetime="18:00">6pm</time>.

For a specific date and time (local time), here is how we do

You may collect your book at <time datetime="2011-01-16T06:00Z">January 16, 2011 6pm</time>.

Alternatively, you may need to specify an accurate date and time with time zone too.

The webinar will start at <time datetime="2011-02-22T09:00-4:00">February 22, 2011 9am EDT</time>.

The HTML5 specification tells us not to use "time" element if precise date or time is not known. For instance,

"I know what you did last Summer" or "I knew him sometime around 1980"

You may ask what do we get at the end of the day for using the "time" element. Alright, with all the effort, we are making our content machine readable, imagine we can one day save the "February 22, 2011 9am EDT" into our Calendar with just one click.

Besides the "datetime" attribute, the "time" element has two more attributes "pubdate" and "valueAsDate".

Attributes Descriptions
dateTime Date or Time or Date Time value. If present, gives the date or time being specified. Otherwise, the date or time is given by the element's contents.
pubDate Publication Date. This is boolean attribute, which means you don't need put a value to it. If specified, it means the publication date of an article (<article>), if "time" element is not within an article block, it means it is the publication date of the entire document.
Note: You should only have one "pubdate" in one article or one document.
valueAsDate This is a readOnly attribute, it returns a Date object representing the specified date and time

"pubDate" can be typically applied in blog entry or news article. For article that published in January 21 2011, simply encode as :

<time datetime="2011-01-21" pubdate>January 21 2011</time>