HTML and CSS Reference
Wrap the human-friendly date-time information in the time element, and specify the
machine-readable information via the datetime attribute:
<p>Published: <time datetime="2011-01-15">January 15, 2011</time> </p>
Depending on the date and time you are trying to specify, the following approaches are
<p>The class starts at <time datetime="08:00">8:00 am</time> .</p>
Date and time (requires time zone specification)
<p>Registration opens on <time datetime="2011-01-15T08:00-07:00">January 15, 2011
at 8:00 am, Mountain Time</time> .</p>
Visible machine-readable format (no date-time required)
<p>Published: <time>2011-01-15</time> </p>
Before we discuss this new element, let's first address machine readability . This is simply
the notion of enriching your web content with additional, semantic information that
machines (search engines, user agents, etc.) can parse to glean more meaning from your
We're not aware of any machines that are currently parsing the date
time information from time , but we can imagine this soon to be on the
horizon, particularly for search engines that want to accurately display
time-sensitive results for news queries.
Next, let's talk date-time information on the Web. For machine readability, date-time
information has to be specified in the international standard format, ISO 8601 . For
dates, the format is YYYY-MM-DD . For times of day, the format is hh : mm : ss . And when
combining dates with times, you join the numeric representations with a T : YYYY-MM-
DD T hh : mm : ss .
Okay, back to the new time element. As you can see from the examples, you can specify
dates, times, and date-times. What the human user experiences is the content contained
by time . What machines read is the datetime ISO 8601 value.
One limitation of time that is worth mentioning is that it can't be used
for imprecise dates, such as “August 2011.” It does require, minimally,
the day, month, and year for dates.