HTML5: time, datetime and pubdate

The HTML5 tag <time> addresses the need for semantically tagging a date or time. It allows defining both a machine readable and human readable version of a date or time. This way you can just have Yesterday displayed and let a machine parsing your page that it’s actually December, 7th 2012.

This is also of course useful for working with timezones. Let’s say you’re living in Germany but are on a business trip to India and write about doing something at 2pm. For the reader, it’s obvious that it’s 2pm Indian Standard Time but a machine will not understand that when you write 2pm, it usually means 2pm Central European Time but in this particular page/post it’s not the case. On the other hand, I don’t think that any human being likes reading date/times with time zone info (especially when it’s clear from the context which time zone is meant).

Using a <time> tag is as easy has writing <time>2011-12-25</time>. Of course, here you just tag “2011-12-25” as a date/time info but other than that it doesn’t really carry more info. If you do not use the datetime attribute, the content of the time tag must be a valid date/time i.e. contain a machine readable date/time.

Now, it really get’s interesting when I can write “last Christmas” and a machine parsing this understand I mean December, 25th 2011. That’s also really simple, just write <time datetime="2011-12-25">last Christmas</time>. This will be displayed as but will be interpreted by a machine as 2011-12-25.

Instead of a date, you could also have a time e.g. <time datetime="14:00">at 2pm</time> or a date and time e.g. <time datetime="2012-12-08T12:07+01:00">Now</time>.

If you specify a date and a time, you have to specify a UTC time offset or use “Z” for UTC time e.g. 2012-12-08T12:07+00:00 is the same as 2012-12-08T12:07Z.

You can also write a date omitting the year e.g. 12-08 for December 8th or a duration. Durations are defined by a P (for period of time) followed by the duration definition:

  • PnYnMnDTnHnMnS e.g. P3Y for three years or PT2H25M for 2 hours and 25 minutes
  • PnW e.g. P2W for 2 weeks

Note that P1M is a one month duration and PT1M is a one minute duration.

One restriction with <time> is that it can only represent in the Christian Era. Older date cannot be encoded. So if you’re writing an online biography of Julius Caesar, you can forget the <time> tag (except when referencing other books written about him later on).

Note that the <time> tag was removed from the HTML5 specification last year (to be replaced by the <data> tag) but made it again in HTML5 shortly afterwards. So it’s future is not 100% clear but at least it made it in WordPress and Drupal so it’s quite widely used.

The pubdate attribute is used to tell whoever is parsing the time tag that the time value is related to the time when article/document was published. To be exact, it indicates the date of publication of its nearest <article> ancestor if present or the entire document. There are good chances that pubdate will be removed from the HTML5 specification. That’s why HTML5 validators report its presence (and why I’ve removed it from my theme).

Leave a Reply

Your email address will not be published. Required fields are marked *