HTML and CSS Reference
In-Depth Information
Solution
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
also valid:
Time only
<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>
Discussion
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
content.
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.
