7. 清單 (List)

By /

HTML 清單將相關項目組合起來，並表達它們之間的關係。清單適合用於課程主題、操作指引、導覽連結及詞語解說。

HTML 提供三種主要清單類型：

類型元素用途
無序清單<ul> 和 <li>次序沒有重要意義的項目
有序清單<ol> 和 <li>次序具有重要意義的項目
描述清單<dl>、<dt> 和 <dd>詞語或名稱與其描述或數值的配對

應按內容的意義選擇清單類型，而不是按想要的項目符號樣式選擇。

7.1 無序清單

當改變項目次序不會改變內容的基本意義時，使用 <ul>：

<ul>
  <li>程式碼編輯器</li>
  <li>現代網頁瀏覽器</li>
  <li>用來儲存網站檔案的資料夾</li>
</ul>

在這個例子中：

  • <ul> 容納整個清單。
  • 每個 <li> 表示一個清單項目。

瀏覽器通常會使用圓點等項目符號顯示無序清單。CSS 可以改變它們的外觀。

不要在獨立段落中手動輸入圓點符號，代替真正的清單。

7.2 有序清單

當順序或排名具有意義時，使用 <ol>：

<ol>
  <li>建立名為 index.html 的檔案。</li>
  <li>加入 HTML 內容。</li>
  <li>儲存檔案。</li>
  <li>在瀏覽器中開啟。</li>
</ol>

瀏覽器通常會顯示數字編號。

即使 CSS 將編號改為字母或羅馬數字，這些項目仍然屬於有序清單。

從其他數字開始

start 屬性設定起始序號：

<ol start="4">
  <li>檢查網頁結構。</li>
  <li>檢查連結。</li>
  <li>測試鍵盤導覽。</li>
</ol>

這通常會顯示為第 4、5、6 項。

反向編號

<ol reversed>
  <li>第三名</li>
  <li>第二名</li>
  <li>第一名</li>
</ol>

如果沒有明確設定 start，編號會從清單項目的數量開始。

reversed 是布林屬性。只要它存在，就會啟用反向編號；reversed="false" 不會關閉這個功能。

設定個別項目的序號

在有序清單中，value 可以設定某個項目的序號：

<ol>
  <li>第一項工作</li>
  <li value="5">第五項工作</li>
  <li>第六項工作</li>
</ol>

後續項目會從指定的序號繼續編號。

只有在編號具有實際意義時才使用這個屬性，不要用它繞過樣式設定問題。

7.3 有序清單的編號類型

<ol> 支援 type 屬性：

值編號樣式
1十進制數字
a小寫字母
A大寫字母
i小寫羅馬數字
I大寫羅馬數字

例如：

<ol type="A">
  <li>準備文件。</li>
  <li>加入內容。</li>
  <li>檢查結果。</li>
</ol>

當編號形式對內容有意義，例如需要引用「A 部分」及「B 部分」時，可以使用 type。

如果只是視覺上的選擇，通常應優先使用 CSS：

.exercise-steps {
  list-style-type: lower-alpha;
}

即使編號顯示為字母或羅馬數字，start 和 value 屬性仍使用整數。

7.4 描述清單

描述清單表達詞語或名稱與其描述或數值之間的關係：

<dl>
  <dt>HTML</dt>
  <dd>描述網頁內容的結構和意義。</dd>

  <dt>CSS</dt>
  <dd>控制外觀及版面配置。</dd>

  <dt>JavaScript</dt>
  <dd>提供互動行為及應用程式邏輯。</dd>
</dl>
元素用途
<dl>容納描述清單
<dt>詞語或名稱
<dd>對應的描述或數值

描述清單適合用於：

  • 詞彙表。
  • 課程資料。
  • 中繼資料。
  • 名稱與數值配對的資訊。

例如：

<dl>
  <dt>授課語言</dt>
  <dd>繁體中文</dd>

  <dt>地點</dt>
  <dd>香港</dd>
</dl>

多個詞語或描述

同一組可以包含多個詞語，或多個描述：

<dl>
  <dt>HTML</dt>
  <dt lang="en">HyperText Markup Language</dt>
  <dd>用來建立網頁結構的標記語言。</dd>
</dl>

不要在 <dl> 內使用 <li> 表示描述清單的條目。

7.5 巢狀清單

清單可以包含子清單，用來表達層級關係：

<ul>
  <li>
    前端基礎
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>無障礙基礎</li>
</ul>

將子清單放在所屬的 <li> 內。

錯誤：

<ul>
  <li>前端基礎</li>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
  </ul>
</ul>

正確：

<ul>
  <li>
    前端基礎
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ul>

有需要時，可以混合清單類型，例如在有序操作步驟的其中一項內，加入無序的材料清單。

避免不必要的多層巢狀結構，以免內容難以理解。

7.6 清單項目內的內容

清單項目不只可以包含一行短文字：

<ol>
  <li>
    <p>建立你的文件。</p>
    <p>使用 UTF-8 編碼，將它儲存為 <code>index.html</code>。</p>
  </li>
  <li>
    <p>在瀏覽器中開啟文件。</p>
  </li>
</ol>

在適合的情況下，清單項目可以包含段落、連結、圖片及子清單。

對一般可見內容而言，<ul> 和 <ol> 的直接子元素應為 <li>。不要直接在它們內放入標題或段落。

清單本身也不能放在 <p> 內：

<p>所需軟件：</p>
<ul>
  <li>程式碼編輯器</li>
  <li>網頁瀏覽器</li>
</ul>

7.7 連結清單

清單經常適合用於導覽：

<nav aria-label="課程導覽">
  <ul>
    <li><a href="index.html">首頁</a></li>
    <li><a href="courses.html">課程</a></li>
    <li><a href="contact.html">聯絡我們</a></li>
  </ul>
</nav>

各元素有不同職責：

  • <nav> 標示導覽區。
  • <ul> 將連結組成清單。
  • <li> 標示每個項目。
  • <a> 提供導覽功能。

不是所有連結集合都需要 <nav>。應將它保留給主要的導覽區塊。

7.8 清單的語言設定

清單會繼承包含它的元素所設定的語言。

香港英文網頁可以使用：

<html lang="en-HK">

中文清單可以覆寫該語言設定：

<ul lang="zh-Hant-HK">
  <li>文字編輯器</li>
  <li>網頁瀏覽器</li>
  <li>網站資料夾</li>
</ul>

如果清單包含不同語言，可以標示個別項目或詞組：

<ul>
  <li>HTML basics</li>
  <li lang="zh-Hant-HK">無障礙網頁入門</li>
</ul>

一般英文可以使用 lang="en"。主要使用香港繁體中文的網頁，則應在 <html> 設定 lang="zh-Hant-HK"。

語言設定不會改變清單的語意類型。

7.9 使用 CSS 設定清單外觀

CSS 控制項目符號、縮排及間距：

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

ul,
ol {
  padding-inline-start: 1.75rem;
}

li {
  margin-block: 0.5rem;
}

li::marker {
  color: #005ea8;
}

實用屬性及選擇器：

屬性或選擇器用途
list-style-type選擇項目符號或編號樣式
list-style-position控制項目符號的位置
padding-inline-start提供配合文字方向的縮排
li::marker設定清單標記的樣式
margin-block控制垂直間距

不要使用 <ul> 上已過時的 type 屬性選擇圓點樣式。

移除項目符號

導覽設計有時會使用：

.navigation-list {
  list-style: none;
  padding: 0;
}

移除項目符號不會改變 HTML 元素，但部分瀏覽器與輔助技術組合可能不再按預期呈現清單語意。

應測試結果。有需要時，可以明確加入 role="list"，保留沒有項目符號的清單語意：

<ul class="navigation-list" role="list">
  <li><a href="courses.html">課程</a></li>
  <li><a href="contact.html">聯絡我們</a></li>
</ul>

一般保留項目符號的清單，不需要這個重複的角色設定。

7.10 完整範例：課前準備

以下中文版網頁示範無序檢查清單、包含子清單的有序操作步驟，以及描述清單。

主要語言設定為香港繁體中文，英文摘要有自己的語言設定。

id: hong-kong-html-lists
name: 清單 — 香港課前準備
type: html
content: |-
  <!doctype html>
  <html lang="zh-Hant-HK">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>課前準備 | HTML 清單</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        color: #222;
        background: #f5f7fa;
        font-family: system-ui, sans-serif;
        line-height: 1.8;
      }

      main {
        max-width: 46rem;
        margin-inline: auto;
        padding: 2rem 1rem;
      }

      h1,
      h2 {
        color: #005ea8;
        line-height: 1.4;
      }

      h1 {
        margin-block: 0 1rem;
      }

      h2 {
        margin-block: 0 1rem;
      }

      section {
        margin-block: 1.5rem;
        padding: 1.25rem;
        border: 1px solid #767676;
        border-radius: 0.5rem;
        background: white;
      }

      ul,
      ol {
        padding-inline-start: 1.75rem;
      }

      li {
        margin-block: 0.5rem;
      }

      li::marker {
        color: #005ea8;
      }

      dt {
        margin-block-start: 1rem;
        font-weight: 700;
      }

      dd {
        margin-block: 0.25rem 1rem;
        margin-inline-start: 1rem;
      }

      code {
        font-family: ui-monospace, monospace;
        overflow-wrap: anywhere;
      }

      .welcome {
        padding: 1rem;
        border-inline-start: 4px solid #005ea8;
        background: #eaf2f8;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>準備你的第一堂 HTML 課</h1>
      <p>
        不同類型的資訊，需要使用不同類型的清單。
      </p>

      <p class="welcome">
        請先準備文字編輯器及網頁瀏覽器，
        然後按照步驟建立你的第一個 HTML 文件。
      </p>

      <section>
        <h2>所需工具</h2>
        <ul>
          <li>純文字或程式碼編輯器</li>
          <li>現代網頁瀏覽器</li>
          <li>用來儲存網站檔案的資料夾</li>
        </ul>
      </section>

      <section>
        <h2>設定步驟</h2>
        <ol>
          <li>
            建立名為 <code>my-first-website</code> 的資料夾。
          </li>
          <li>
            準備檔案：
            <ul>
              <li>建立 <code>index.html</code>。</li>
              <li>使用 UTF-8 編碼儲存檔案。</li>
            </ul>
          </li>
          <li>加入一個標題及兩個段落。</li>
          <li>儲存檔案，並在瀏覽器中開啟。</li>
          <li>修改內容，再次儲存，然後重新載入網頁。</li>
        </ol>
      </section>

      <section>
        <h2>課程資料</h2>
        <dl>
          <dt>程度</dt>
          <dd>入門</dd>

          <dt>授課語言</dt>
          <dd>繁體中文，附有部分英文說明</dd>

          <dt>學習語境</dt>
          <dd>香港</dd>

          <dt>所需經驗</dt>
          <dd>不需要具備網頁開發經驗</dd>
        </dl>
      </section>

      <section>
        <h2>完成後檢查</h2>
        <ul>
          <li>檔案名稱是否以 <code>.html</code> 結尾？</li>
          <li>文件是否包含正確的 doctype？</li>
          <li>主要內容語言是否已設定？</li>
          <li>標題及段落是否清晰？</li>
        </ul>
      </section>

      <section lang="en-HK">
        <h2>English Summary</h2>
        <p>
          Use an unordered list for equipment,
          an ordered list for setup steps,
          and a description list for course details.
        </p>
      </section>
    </main>
  </body>
  </html>

在這個範例中：

  • <ul> 將工具組合起來，不指定順序。
  • <ol> 表示應按次序完成的步驟。
  • 子清單 <ul> 放在第二個步驟的 <li> 內。
  • <dl> 將課程資料名稱與對應內容配對。
  • 英文章節有自己的語言設定。
  • CSS 改變外觀，同時保留清單結構。

7.11 常見錯誤

錯誤較好的做法
在段落中手動輸入圓點符號使用 <ul> 和 <li>
為一般步驟手動編號使用 <ol>
只按外觀選擇清單類型按意義選擇，再使用 CSS 設定樣式
將子清單放在所屬 <li> 之外放在相關項目內
直接在 <ul> 或 <ol> 內放入段落使用 <li> 包住每個項目
將清單放在 <p> 內先結束段落，再加入清單
用 <li> 表示描述清單條目使用 <dt> 和 <dd>
使用 reversed="false" 關閉反向編號移除 reversed 屬性
在 <ul> 使用過時的項目符號樣式屬性使用 list-style-type
移除項目符號後沒有測試無障礙功能檢查清單語意是否仍可被識別

本章總結： 無序清單用來組織相關項目，有序清單用來表達有意義的順序，描述清單則用來配對詞語與描述。保持有效的巢狀結構，按需要設定語言，並使用 CSS 控制外觀。

相關文章

Scroll to Top