What is best practice of using tags for a list of events?

Question

I had my list of past events marked up in a ul with li (list items), but then I decided to just use h4 and a paragraph like below:

<div class="cols_12-6 first stacked">
<h3>News</h3>
<h4>01/08/2014</h4>
<p>This is my first event</p>

<h4>08/30/2013</h4>
<p>Second event</p>

<h4>11/15/2011</h4>
<p>My last event will go here</p>
</div>

Is it acceptable, semantically to use a date in a heading tag?

Answer 1

Each event could be an article:

<section>
  <h1>Events</h1>
  <article><!-- event A --></article>
  <article><!-- event B --></article>
  <article><!-- event C --></article>
</section>

You could use an ul in addition if you think it’s useful to group them as list, but it’s not required:

<section>
  <h1>Events</h1>
  <ul>
    <li><article><!-- event A --></article></li>
    <li><article><!-- event B --></article></li>
    <li><article><!-- event C --></article></li>
  </ul>
</section>

(Only use ol if the order is meaningful; don’t use it just because the events are sorted by date.)

It’s allowed (and can be useful) to have the date as heading content. It depends on your content. It might make sense if the list is about the same kind of event; it wouldn’t make much sense if there can be different events on the same date. In such a case, you might want to use sub-section elements that have the date as heading and article children (with the event name as heading):

<section>
  <h1>Events</h1>
  <section>
    <h1><time>2014-03-23</time></h1>
    <article><!-- event A --></article>
    <article><!-- event B --></article>
  </section>
  <section>
    <h1><time>2014-03-30</time></h1>
    <article><!-- event C --></article>
  </section>
</section>

In any case, you might want to use the time element for the date:

<h1><time datetime="2013-08-30">08/30/2013</time></h1>

---

You can omit all this heading and sectioning content stuff if you really only have a list of links to events, and you don’t provide any additional metadata:

<section>
  <h1>Events</h1>
  <ul>
    <li><a href="/event-a"><time>2014-03-23</time> Event A</a></li>
    <li><a href="/event-b"><time>2014-03-23</time> Event B</a></li>
    <li><a href="/event-c"><time>2014-03-30</time> Event C</a></li>
  </ul>
</section>

Also possible with dl:

<section>
  <h1>Events</h1>
  <dl>
    <dt><time>2014-03-23</time></dt>
      <dd><a href="/event-a">Event A</a></dd>
      <dd><a href="/event-b">Event B</a></dd>
    <dt><time>2014-03-30</time></dt>
      <dd><a href="/event-c">Event C</a></dd>
  </dl>
</section>

---

Side note: You might want to annotate your content with semantic metadata, for example with Schema.org’s Event.