Question

如果我列出了某个月内发生的事件，例如：

十月活动：

十月8 - 社区舞蹈   10月9日 - 卡拉OK之夜   10月10日 - Pot-luck

使用UL，OL或其他方法编写此代码的最佳方法是什么？

无序列表

<h3>October Events</h3>

<ul>
   <li>Oct. 8 - Community Dance</li>
   <li>Oct. 9 - Karaoke Night</li>
   <li>Oct. 10 - Potluck</li>
</ul>

有序列表

<h3>October Events</h3>

<ol>
   <li>Oct. 8 - Community Dance</li>
   <li>Oct. 9 - Karaoke Night</li>
   <li>Oct. 10 - Potluck</li>
</ol>

如果我要包含描述，那会改变你对它的看法吗？有了描述，我可能会这样：

<h3>October Events</h3>

<article>
   <h4>Community Dance</h4>
   <p class="date">Oct. 8</p>
   <p>Description</p>
</article>

<article>
   <h4>Karaoke Night</h4>
   <p class="date">Oct. 9</p>
   <p>Description</p>
</article>

<article>
   <h4>Potluck</h4>
   <p class="date">Oct. 10</p>
   <p>Description</p>
</article>

因此，考虑到Web标准，编写事件列表的最具语义的方法是什么？

Answer 1

基于W3C Wiki（http://www.w3.org/wiki/HTML_lists）：

在尝试确定要使用的列表类型时，通常可以通过提出两个简单的问题来决定：

我定义术语或关联其他名称/值对吗？
- 如果是，请使用说明列表。
- 如果不是，请不要使用说明列表 - 继续下一个问题。
列表项的顺序是否重要？
- 如果是，请使用有序列表。
- 如果不是，请使用无序列表。

在这里你应该使用：

<dl>
  <dt>Oct. 8</dt>
  <dd>Community Dance</dd>
  <dt>Oct. 9</dt>
  <dd>Karaoke Night</dd>
  <dt>Oct. 10</dt>
  <dd>Potluck</dd>
</dl>

Answer 2

这取决于您对“Web标准”和“语义”的定义。在旧的意义上，“语义”指的是意义，这个问题实际上是关于结构。使用ol，ul，dl，table，div或其他内容并没有真正说明含义。

实用问题是：当您忽略所有CSS设置时，您希望如何显示数据？这似乎需要一个表，它也是结构最合适的标记（一列中的日期，另一列中的事件名称），并且它也是可扩展的（如果需要，可以添加新列，例如事件的地点）。

考虑到Web标准和语义，在编写事件列表时，我应该使用有序或无序列表吗？

2 个答案: