Список событий, что является лучшей практикой?

Question

Мой список прошлых событий был отмечен в ul с помощью li (элементы списка), но затем я решил использовать h4 и параграф, как показано ниже

<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>

Но теперь я думаю, что это не может быть правильно семантически. Похоже, вы не должны иметь дату в качестве заголовка, верно? Кроме того, поскольку это всего лишь ссылки на полную историю, кажется, что ничто не должно использовать заголовок, верно?

Так, каков лучший способ стилизовать это? Имеет ли это значение? Или ul with li лучший способ?

Answer 1

Каждое событие может быть article:

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

Вы могли бы использовать ul кроме того, если вы считаете, что полезно сгруппировать их в виде списка, но это не обязательно:

<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>

(Использовать только ol если порядок имеет смысл; не используйте его только потому, что события отсортированы по дате.)

Разрешено (и может быть полезно) указывать дату в качестве заголовка. Это зависит от вашего контента. Это может иметь смысл, если список относится к событию того же рода; не будет большого смысла, если в один и тот же день могут быть разные события. В таком случае вы можете использовать section элементы, имеющие дату в качестве заголовка и article дети (с названием события в заголовке):

<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>

В любом случае, вы можете использовать time элемент для даты:

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

---

Вы можете опустить все это содержимое заголовков и секций, если у вас действительно есть только список ссылок на события, и вы не предоставляете никаких дополнительных метаданных:

<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>

Также возможно с 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>

---

Примечание: возможно, вы захотите аннотировать ваш контент семантическими метаданными, например, с помощью события Schema.org.