demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter.

featured articles

popular favourites

</time> after <time>: semantic dates in HTML5

ClockThe <time> element has had an off-again, on-again relationship with HTML5. Removed from the specification several months ago by WHATWG, it was quickly reinserted after an uprising from the web development community. <time> is not just back, it’s improved and better than ever, with many of the element’s new attributes officially supported by the W3C.

<time> surrounds time and date content on your page, in almost any context: the only requirement is that the date must be anytime between 0 CE and the future, as the element cannot take negative values. <time> allows the browser, search engines and other applications to understand the specific time and date that is referenced on a web page, rather than guessing.

The simplest example is a year date:

  1. <p>The <time datetime="1816">year without a summer</time>.</p>

Or a month, for any year:

  1. <p>Remember, remember <time datetime="11-05">the fifth of November</time>,
  2. Guy Fawkes Day.</p>

Month and year or full date:

  1. <p>Construction of the Berlin Wall began in <time datetime=1961-08>August 1961
  2. </time>. It fell on <time datetime="1989-11-09">9 November, 1989.</time></p>

Obviously we can also talk about dates in the future. Full dates should include a time, in 24-hour (military) format, separated from the date by a T character or a space:

  1. <p>The working group’s presentations have been rescheduled for
  2. <time datetime="2012-03-07T15:00">3pm next Wednesday</time></p>

(Note that the W3C validator currently allows the full date without time information; it may not yet recognize the year-only and month-year combinations shown above).

For exact moments in time, we can also supply seconds:

  1. <p>I’ll see everyone at <time datetime="2012-02-21 20:00:00">the party next
  2. Tuesday</time></p>

That’s a good start, but remember that all web pages are international: a browser looking at the datetime value above has no idea which side of the international date line the page is talking about. While not having this information is allowed by the W3C validator, you should always add time zone details by specifying the offset between the location of the event and UTC (Coordinated Universal Time) traditionally known as Greenwich Mean Time. For example, Calgary is in the Mountain Time Zone, seven hours behind London. With that information, the HTML code would become:

  1. <p>I’ll see everyone <time datetime="2012-02-21T20:00:00-07:00">next Tuesday
  2. </time></p>

Alternatively, using just the time:

  1. <p>You have a meeting at <time datetime="09:00-07">9am</time></p>

(A nice way of calculating time offsets from UTC for different cities around the world is at timeanddate.com)

pubdate

pubdate is now supported by the W3C. Adding the pubdate attribute to <time> indicates the publication date of the first appropriate ancestor element . For example:

  1. <article>
  2. <time datetime="2012-02-18">Posted 18 February</time>
  3. </article>

…would indicate that the article was published on 18 February, 2012. A time with pubdate attribute directly in the <body> would indicate that the page was made on that date and time.

Ranges

Time now has the ability to describe time ranges and durations with the P prefix:

  1. <p>Bake the soufflé for <time datetime="P25M">25 minutes</time></p>

You can specify durations of weeks (W), days (D), minutes (M) and seconds (S). These units may be separated by spaces:

  1. <p>Wait <time datetime="P27D 7H 43M 11.5S">one lunar month</time>
  2. before testing for lycanthropy

You must be signed up in order to leave comments.

web developer guide

featured comment

by Aisling Brock in New Business Card Design

what i'm reading

A Feast for Crows: A Song of Ice and Fire: Book Four
A Feast for Crows: A Song of Ice and Fire: Book Four

what i'm watching

Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]
Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]

what i'm playing

Borderlands
Borderlands

what i'm hearing

Planets
Planets

blogs

podcasts

no ads ever

This blog is free of advertising, and always will be.

creative commons licensed

The content of this blog is free to use in whatever way you wish under the Creative Commons license.