HTML5 事件列表语义
HTML5 Event Listing Semantics
将每个事件列为事件列表页面上的 <article>
是否正确(假定每个事件都是来自所述事件的详细信息页面的列表。它是否应该被视为与博客相同的东西(语义上)。在标记方面也应该考虑事件date/time。欢迎任何参考阅读,我找不到任何细节!
<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>
事件
使用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>
将每个事件列为事件列表页面上的 <article>
是否正确(假定每个事件都是来自所述事件的详细信息页面的列表。它是否应该被视为与博客相同的东西(语义上)。在标记方面也应该考虑事件date/time。欢迎任何参考阅读,我找不到任何细节!
<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>
事件
使用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>