Let's assume I want to present a TODO list such as this:
8:00
Walk the dog!
8:30
Clean the car!
9:20
Rob the bank!
9:21
Run the dog!
22:00
Have a beer!
22:05
My first though was to use a definition list, but it's not a great fit:
<dl>
<dt>8:00</dt>
<dd>Walk the dog!</dd>
<dt>8:30</dt>
<dd>Clean the car!</dd>
<dt>9:20</dt>
<dd>Rob the bank!</dd>
<dt>9:21</dt>
<dd>Run the dog!</dd>
<dt>22:00</dt>
<dd>Have a beer!</dd>
<dt>22:05</dt>
<!--<dd>Missing element???</dd>-->
</dl>
AFAIK, a <dt>
must be followed by one or more <dd>
tags. But the last time (22:05) does not have any (non-empty-)element to follow it.
Furthermore, the points in time given semantically should correspond just as much to the element before it as the one after it, but that relationship is lost here too.
Is there any other combination of HTML tag(s) that might fit this data better?
HTML can’t convey this. You have to make the durations/intervals explicit (i.e., with natural language).
While the time
element can be used for durations, the duration has not a specific date as start/end. So you can convey that walking the dog takes 30 minutes, but not that you walk the dog from 8:00 to 8:30. By nesting time
elements, you can (at most) hint at that.
The equivalent for non-time-related values is the data
element, but there are no standardized formats, so you can’t convey that a value represents sea depth or a sea depth interval.
So with dl
it could look like this:
<dl>
<dt><time datetime="12h 39m"><time>09:21</time> to <time>22:00</time></time></dt>
<dd>Run the dog!</dd>
<dt><time datetime="5m"><time>22:00</time> to <time>22:05</time></time></dt>
<dd>Have a beer!</dd>
</dl>
(This would also allow you to skip times, e.g., in case you didn’t really run the dog from 09:21 to 22:00.)
A semantically weaker variant (e.g., if you don’t want to provide the end time in the same element) would be something like this:
<dt><time datetime="5m"><time>22:00</time></time></dt>
In that case, you would have to provide an empty dd
element for the last time (or whatever makes sense in your case).