---
# System prepended metadata

title: HTML 的 UL 和 OL 兩者使用上的差異

---

# 前提 : `<ol>` 跟 `<ul>` 都是 HTML 的清單（list）元素，差別不在「排版」，而在 語意（semantics）與使用時機。

### 🔹 `<ul>`（Unordered List：無序清單）

#### ✅ 什麼時候用？

**項目順序**不重要，換順序不影響意思。

**📌 特徵**

* 預設是「• 圓點」
* 表示「一組同類型的項目」

**🧠 常見使用情境**

* 導覽列（Menu）
* 功能列表
* 標籤、分類
* 重點條列

**📄 範例**

```
<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ul>

```

---

### 🔹 `<ol>`（Ordered List：有序清單）

#### ✅ 什麼時候用？

**順序很重要**，不能隨便換。

**📌 特徵**

* 預設是 1. 2. 3.
* 瀏覽器 / 螢幕閱讀器會知道這是「步驟」

**🧠 常見使用情境**

* 操作步驟
* 排名（Top 10）
* 流程、教學說明
* 考試題目順序

**📄 範例**

```
<ol>
  <li>打開電腦</li>
  <li>登入系統</li>
  <li>開始工作</li>
</ol>

```

➡️ 順序錯就變成錯誤流程

---

### 🔸 `<ol>` vs `<ul>` 重點比較

| 項目        | `<ul>` | `<ol>`   |
| --------- | ------ | -------- |
| 順序重要嗎     | ❌ 不重要  | ✅ 重要     |
| 預設樣式      | 圓點     | 數字       |
| 語意        | 群組     | 步驟 / 排名  |
| SEO / 無障礙 | 普通列表   | 流程、順序更清楚 |

---

### 🧩 進階補充（常被忽略但很重要）

#### 1️⃣ SEO & 無障礙（Accessibility）

1. 螢幕閱讀器會說：
   * `<ul>`：「清單，有 X 個項目」
   * `<ol>`：「有順序的清單，第 1 項…」

2. 教學、流程用 `<ol>` 對 SEO & 無障礙 更友善

--

#### 2️⃣ 可以用 CSS 改樣式，但「不要改語意」

❌ 錯誤觀念：

*想要數字樣式 → 一定用 `<ol>`*

**其實：**

```
ul {
  list-style: decimal;
}

```

**✔️ 樣式 ≠ 語意**
該用 `<ol>` 還是 `<ul>`，看「內容性質」，不是看外觀

--

#### 3️⃣ 巢狀使用（很常見）

```
<ol>
  <li>準備材料
    <ul>
      <li>雞蛋</li>
      <li>牛奶</li>
    </ul>
  </li>
</ol>

```

---

### ✅ 簡單記憶法

「會不會有人說：第 1 步、第 2 步？」
* 會 → `<ol>`
* 不會 → `<ul>`