活动列表，什么是最佳做法？

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>

从语义上来说，在标题标签中使用日期是否可以接受？

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的Event 。