ol vs. ul vs. div

使用 <ol>、<ul> 和 <div> 创建列表的区别

示例代码

以下是分别用 <ol> 和 <div> 创建一个电影列表的例子：

<!-- 有序列表 -->
<ol>
  <li>Clerks (1994)</li>
  <li>Mallrats (1995)</li>
  <li>Jay and Silent Bob Strike Back (2001)</li>
</ol>

<!-- 纯文本容器 -->
<div>
  <div>Clerks (1994)</div>
  <div>Mallrats (1995)</div>
  <div>Jay and Silent Bob Strike Back (2001)</div>
</div>

为什么使用 <ol> 和 <ul> 元素有意义？

语义化 HTML 的重要性
有人提问：“语义化 HTML 是否真的有用？”这是一个好问题，因为许多人知道如何写 HTML，却不了解它的意义。以下是 <ol> 和 <ul> 的一些优势：

1. 屏幕阅读器支持

   • 屏幕阅读器会将内容识别为列表，并报告它是一个包含特定项数的列表。
   • 屏幕阅读器可能会读出每项的编号或符号（如“项目 1”、“项目 2”）。
   • 屏幕阅读器用户可以使用快捷键在页面中的列表之间跳转。

2. 视觉结构

   • <ol> 和 <ul> 为相关内容提供清晰的分组，便于用户快速理解信息关系。

3. 样式化

   • 使用 CSS，可以轻松地对（无序或有序）列表进行样式设置。

---

无序列表 (<ul>)

定义：
用于表示一个主题相关但没有特定顺序的项目集合。

示例：

<h3>我最喜欢的 Kevin Smith 电影</h3>
<ul>
  <li>Jay and Silent Bob Strike Back</li>
  <li>Mallrats</li>
  <li>Clerks</li>
</ul>

屏幕阅读器输出：
使用 NVDA 和 Firefox，屏幕阅读器会这样读取：

“列表，共 3 项，项目符号 Jay and Silent Bob Strike Back，项目符号 Mallrats，项目符号 Clerks，退出列表。”

---

有序列表 (<ol>)

定义：
用于表示一个按特定顺序排列的项目集合，例如时间顺序或优先级。

示例：

<h3>按上映日期排序的 Kevin Smith 电影</h3>
<ol>
  <li>Clerks (1994)</li>
  <li>Mallrats (1995)</li>
  <li>Jay and Silent Bob Strike Back (2001)</li>
</ol>

屏幕阅读器输出：
使用 NVDA 和 Firefox，屏幕阅读器会这样读取：

“列表，共 3 项，1 Clerks，2 Mallrats，3 Jay and Silent Bob Strike Back，退出列表。”

---

使用 <div>

如果不使用语义化元素，而是仅用 <div> 包裹内容，屏幕阅读器会将内容读取为一组无关联的字符串，没有提供结构性信息。

示例：

<h3>按上映日期排序的 Kevin Smith 电影</h3>
<div>
  <div>Clerks (1994)</div>
  <div>Mallrats (1995)</div>
  <div>Jay and Silent Bob Strike Back (2001)</div>
</div>

屏幕阅读器输出：
NVDA 和 Firefox 会读取：

“Jay and Silent Bob Strike Back，Mallrats，Clerks。”

相比 <ol> 和 <ul>，这种方式缺乏语义信息，用户无法直接感知内容的分组或顺序关系。

---

列表样式化

当我们尝试对列表进行样式化时，可能会遇到一些复杂情况，例如需要移除默认的编号或项目符号。但这些问题可以通过 CSS 解决。有关列表样式化的深入探讨，请参阅 Scott O'Hara 的文章 Fixing Lists。

总结

• 使用 <ul> 和 <ol> 有助于提供结构和语义，提升可访问性和用户体验。
• 如果仅使用 <div>，会丢失这些优势。
• 在需要表现项目分组或顺序时，推荐使用语义化的列表元素，而不是普通的 <div> 容器。