HTML5 Semantic markup of particular date/time module

Question

I have a element on my page that informs the user of the days an event is going on, the month and year and finally how many days are to go before the event. I was wondering if the following within the HTML5 specification is the correct HTML5 markup pattern for this data.

example of what the markup needs to produce

my markup (slightly different to the image above):

<section>
    <div>London</div>
    <time datetime="2013-02-20">20</time>
    –
    <time datetime="2013-02-21">21</time>
    <time datetime="2013-02">Feburary 2013</time>
    <div>24 days to go</div>
</section>

Any suggestions on correct markup?

Answer 1

I'm not sure whether a <section>-element is the right wrapper for this container. The specs on w3.org say:

A section, in this context, is a thematic grouping of content, typically with a heading.

In the example markup, you don't have a heading, which could be added, but I don't think, that the date itself "is a thematic grouping of content", it is more a meta information to some other content.

Regarding the <time>-elements another way to write this thingy could be:

<div>London</div>
<time datetime="P2D">20 - 21</time>
<time datetime="2013-02-20">Feburary 2013</time>
<div>24 days to go</div>

The first one describes a duration of two days, which the event will last. The second specifies the day the event starts. Without the tags it still reads "London 20 - 21 February 2013 24 days to go".

You can read more about it here on w3.org:

4.6.11 The time element
2.4.5.9 Durations