Best way to mark up a countdown timer

Question

I am trying to achieve something similar to what is shown on the following page:

http://2.s3.envato.com/files/7689014/index.html

Basically a countdown timer.

I am a little unsure semantically what is the best way to mark this up.

Can anyone help please?

Answer 1

I suppose you could either use microformats, or the html 5 time element:

<time date="2011-10-31">2011-10-31</time>

Possibly with the pubdate (Boolean) attribute to define the time as the publication date:

<time date="2011-10-31" pubdate>

You may need to wrap the individual components in spans, perhaps, to allow for styling each day, hour, minute, second...as an individual counter, though:

<time date="2011-10-31" pubdate><span class="year">2011</span>-<span class="month">11</span>-<span class="day">31</span></time>

References:

• <time> at html5doctor.com.
• <time> at the W3.org.
• 'Making <time> safe for Historians', at Quirksmode.org.