The HTML5 Time Element Is Back and Better Than Ever

The HTML5 time element pulled a disappearing act last year. HTML5 editor Ian Hickson deleted it from the specification, but then the W3C, the group that oversees HTML5, stepped in to override Hickson’s decision, adding time back to HTML5. Now you see it, now you don’t, now you do again.

The W3C didn’t just add time back though; they’ve improved it considerably. While nothing has changed with the human-readable part — that is, anything between

<time> and </time> — the datetime attribute has been imbued with new superpowers.

The original version of the time element was rather strict; under the original spec datetime data needed to refer to a specific date. For example, to mark up today’s date you might do something like this

<time datetime="2012-02-17">February 17, 2012</time>

That’s all good and well for days, but what if you just wanted to specify a month? Or a year? What do you do when trying to mark up date-based blog archives, or something in history where the precise date is unknown? The new date spec allows for just that.

To specify a date no more precise than a month you’d do something like this: <time datetime="2012-02">. Take away the month and it would refer to just the year. Other options include the week of the year and a date without a year (for referring to reoccurring events, e.g. holidays).

To see some more examples of the datetime attribute and what you can do with it, head over to Bruce Lawson’s blog. Lawson, who is part of Opera’s developer relations team, recently looked at just about everything you can do with datetime, including specify durations (which uses a somewhat confusing set of abbreviations).

There are two things to keep in mind when using the time element. First, you still can’t represent dates before the Christian era, and second, the pubdate attribute may be cut from the HTML5 spec. Pubdate, which is a boolean attribute for indicating publication dates, is still present in the WHATWG version of HTML5, but there’s a proposal to drop it.