# 前提 : `<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>`