事件列表，最佳实践是什么？

Question

我用 li（列表项）在 ul 中标记了我的过去事件列表，但后来我决定只使用 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 element 作为日期：

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