WordPress: choosing the right datetime format for the HTML5 time element

WordPress: choosing the right datetime format for the HTML5 time element

How to insert the correct time format in the HTML5 datetime attribute of the time element in WordPress.

The time element in HTML5 marks up timestamps. Though many developers insist on using the pubdate attribute, it's worth mentioning that due to recent modifications in the HTML5 specs, this attribute is no longer considered as a valid attribute for the time element. If you want to use this element in a WordPress Loop, there are only few things to keep in mind.

Oli Studholme wrote:

<time> was originally added to allow dates and times to be machine readable, via the datetime attribute. This gives us human-readable content (“yesterday”) plus hidden machine-readable content (“2011-11-02”) with no accessibility problems. It allows for e.g. browsers to offer to localise dates. The pubdate attribute indicating an article’s date of publication was added for HTML to Atom conversion (also removed from HTML5 in this change), and would make it easy for search engines to sort by date. Having permitted dates and times specified in HTML5 (a subset of ISO 8601) allows a validator to check a datetime value is valid.

WordPress provides several date formats for the the_date() and the_time() functions (listed here), but the most suited one to be used with the datetime attribute is as follows:


<time datetime="<?php the_time('c');?>"><?php the_time();?></time>

c formats a timestamp following the ISO 8601 standard. A possible output would be 2012-02-12T15:19:21+00:00. This is exactly one of the recommended formats for the datetime attribute.