HTML5 事件列表语义答案

【问题标题】：HTML5 Event Listing SemanticsHTML5 事件列表语义
【发布时间】：2016-12-27 16:43:42
【问题描述】：

在事件列表页面上将每个事件列为<article> 是否正确（假设每个事件都是来自所述事件的详细页面的列表。它是否应该被视为与博客相同的东西（语义上）。在标记方面还应该考虑事件日期/时间。欢迎任何参考阅读，我找不到任何细节！

<main>
 <article>Event 1 on date given</article>
 <article>Event 2 on date given</article>
 <article>Event 3 on date given</article>
</main>

或者每个事件都应该包含在一篇文章中，并用典型的 div 结构包装。

<article>
 <div> Event 1 on date given</div>
 <div> Event 2 on date given</div>
 <div> Event 3 on date given</div>
</article>

【问题讨论】：

标签： html events seo semantic-markup

【解决方案1】：

对事件使用 article 元素是合适的
如果需要使用分段内容元素。
分段内容元素是必要的
如果在文档大纲中列出每个事件是否有意义。
在文档大纲中列出每个事件是有意义的
如果您提供足够的内容（当然，足够取决于上下文）。

例如，

如果只列出事件名称和日期，ul 元素似乎更合适：

<ul>
  <li><a href="/events/1">Event 1</a> (<time>2016-12-27</time>)</li>
  <li><a href="/events/2">Event 2</a> (<time>2016-12-27</time>)</li>
  <li><a href="/events/3">Event 3</a> (<time>2016-12-28</time>)</li>
</ul>

但如果您提供更多详细信息，例如描述、组织者等，则每个事件的 article 元素可能有意义：

<article>
  <header>
    <h2><a href="/events/1" rel="bookmark">Event 1</a></h2>
    <time>2016-12-27</time>
  </header>
  <p>…</p>
  <img src="" alt="" />
  <p>…</p>
  <footer><p>Organized by …</p></footer>
</article>

<article>
  <!-- event 2 -->
</article>

<article>
  <!-- event 3 -->
</article>

【讨论】：