HTML5 事件列表语义

标签 html events seo semantic-markup

将每个事件列为 <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>

最佳答案

  1. 事件使用article元素比较合适
    如果保证使用分段内容元素。

  2. 分段内容元素是有保证的
    在文档大纲中列出每个事件是否有意义。

  3. 文档大纲
    中列出每个事件是有意义的 如果您提供足够的内容(当然,足够取决于上下文)。

例如,

如果您只列出事件名称和日期,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>

关于HTML5 事件列表语义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41348907/

相关文章:

yii - 当 'urlFormat' 设置为 'path' 时无法获取 GET 查询参数

javascript - 如何使用javascript从一个表单获取值并发布到另一个表单?

javascript - Canvas 在圆圈中移动对象

events - Dymola 模拟日志中的 (U) 事件是什么

c# - 使用泛型类的参数作为事件类型

Java 游戏 - 绘制建筑物的最简单方法

seo - 网页的重要元素是 "nvisible"

HTML 视频标签 Safari

html - 响应式封面图片菜单

带有伪 anchor 和重复内容/SEO 的网址