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。

事件清单，什么是最佳实践？

1 个答案: