若要將多個術語與說明分組，請在 dl 中，先放置一個或多個 dt 元素，再放置一個或多個 dd 元素。本指南將說明如何選擇合適的分組方式、如何在 Mac 上使用 TextEdit 建立小型詞彙表，以及如何確認各項關聯仍然清楚。

HTML 說明清單如何將術語分組？

說明清單用來表示名稱與值之間的關聯。每個群組至少包含一個術語和一項說明，而且所有術語都會出現在說明之前。說明之後出現的下一個術語會開始新的群組。這些關聯是根據文件中的順序建立的。HTML 標準：dl 元素

在詞彙表中，術語可能是版面配置用語，而其說明則解釋該用語。多個連續的術語可以共用同一項說明。您不必在每個別名後都重複相同的解釋。MDN：說明術語元素

實際要考慮的是哪些內容應該放在一起。在撰寫標記之前，先用一般語言寫下每項預期的關聯。在這個虛構範例中，「間距」和「欄溝」共用一項說明，而「磁磚」則有兩種替代含義。

預期關係 單一群組中的結構
一個術語配一項說明 一個 dt，接著一個 dd
多個術語共用一項說明 所有 dt 元素，接著一個 dd
一個術語配多項替代說明 一個 dt，接著多個 dd 元素
多個術語共用多項替代說明 所有 dt 元素，接著所有 dd 元素
一項說明包含多個段落 一個 dd，其中包含這些段落

這些模式符合標準中的分組規則。尤其是，多項獨立說明代表不同的替代值；屬於同一值的段落則應保留在同一個 dd 中。HTML 標準：說明清單語意

哪些說明應該放在同一個群組？

使用這項判斷方式：群組中的每項說明，是否都合理地適用於群組中的每個術語？如果答案是否定的，請將內容拆分成不同群組。這項編輯檢查是依據關聯模型得出的，有助於在內容出現在頁面之前，找出意外的配對。

多個術語共用一項說明

這段範例為兩個虛構的詞彙表術語提供一項共用說明。兩個術語都出現在說明之前，符合 MDN 記載的多個術語模式。MDN：多個術語、單一說明

<dl>
  <dt>Gap</dt>
  <dt>Gutter</dt>
  <dd>The space between adjacent columns.</dd>
</dl>

不要將此範例解讀為兩個各自缺少說明的獨立項目。範例刻意將這兩個名稱視為同一個群組。如果您的詞彙表為它們指定了不同含義，請為每個名稱各自提供一項說明。

一個術語搭配多項替代說明

同一群組中，一項說明後面可以接著另一項說明。在這裡，虛構的詞彙表將「磁磚」用於兩個不同概念。MDN：說明細節元素

<dl>
  <dt>Tile</dt>
  <dd>A repeating unit in a visual pattern.</dd>
  <dd>A rectangular content block in a page layout.</dd>
</dl>

如果多個名稱共用這些相同的替代說明，請將其他術語放在第一項說明之前。不要假設第一個術語只對應第一項說明、第二個術語只對應第二項說明；若要表達這種關係，就必須使用不同群組。MDN 明確記載了結合多個術語與說明的做法。MDN：多個術語與說明

一項說明包含多個段落

如果第二段是對第一段說明的補充，請將兩段都放在同一個 dd 中。dd 接受流內容，包括段落。這樣既能保留單一說明，也能在其中安排易讀的結構。MDN：說明細節技術摘要

<dl>
  <dt>Canvas</dt>
  <dd>
    <p>The working area for a composition.</p>
    <p>In this glossary, the term refers to the whole area.</p>
  </dd>
</dl>

在 Mac 上使用 TextEdit 建立完整範例

從新檔案開始，方便您檢視結果，而不會變更既有文件。在 TextEdit 中，選擇 File > New，接著選擇 Format > Make Plain Text。Apple 將此列為撰寫 HTML 檔案的起始步驟。Apple：在 Mac 上使用 TextEdit 處理 HTML 文件

貼上以下完整文件。它將上述三種判斷方式合併成一份小型詞彙表。每個群組都有自己的 div 容器，這種結構受到支援，可用來為整個群組套用樣式或屬性。MDN：包裝名稱和值群組

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layout glossary</title>
</head>
<body>
  <h1>Layout glossary</h1>
  <dl>
    <div>
      <dt>Gap</dt>
      <dt>Gutter</dt>
      <dd>The space between adjacent columns.</dd>
    </div>
    <div>
      <dt>Tile</dt>
      <dd>A repeating unit in a visual pattern.</dd>
      <dd>A rectangular content block in a page layout.</dd>
    </div>
    <div>
      <dt>Canvas</dt>
      <dd>
        <p>The working area for a composition.</p>
        <p>In this glossary, the term refers to the whole area.</p>
      </dd>
    </div>
  </dl>
</body>
</html>

選擇 File > Save，將檔案命名為 layout-glossary.html，然後按一下 Save。如果 TextEdit 詢問要使用哪個副檔名，請選擇 Use .html。這是 Apple 記載的手動撰寫 HTML 檔案儲存步驟。Apple：建立 HTML 檔案

在瀏覽器中開啟已儲存的檔案。將顯示的文字與以下三項預期關聯比對：「間距」和「欄溝」共用一項說明；「磁磚」有兩項說明；「畫布」有一項包含兩個段落的說明。即使瀏覽器的預設間距看起來與您偏好的設計不同，也可以透過這項比對檢查預期的內容關係。

編輯時維持分組完整

HTML 支援在 dl 中直接放置術語與說明群組，也支援將群組包在 div 元素中。在同一份清單中，請統一使用其中一種結構。在上述包裝版本中，請將每個群組的術語和說明直接放在其容器內；不要將術語與說明分別放進不同容器。HTML 標準：說明清單內容模型

修改範例時，請進行以下簡短檢查：

  1. 找出您打算修改的群組。
  2. 將該群組的所有術語都保留在說明之前。
  3. 判斷新增的說明文字是另一個值，還是目前值的另一個段落。
  4. 加入不相關術語時，建立新的完整群組。
  5. 儲存文件，並重新載入瀏覽器預覽。

例如，在兩項「磁磚」說明之間加入「面板」，會中斷預期的關係：後面的說明會屬於新開始的群組。請將新術語及其說明放在自己的容器中。這符合標準的規則：遇到說明後出現的術語時，便會開始新的群組。HTML 標準：分組演算法

如果 TextEdit 以格式化文字的方式重新開啟檔案，請使用 File > Open，選取文件，按一下 Show Options，並在開啟前選取 Ignore rich text commands。若要套用到未來建立的檔案，請在 TextEdit > Settings > Open and Save 中選取 Display HTML files as HTML code instead of formatted text。Apple：以程式碼檢視 HTML 文件

最後檢查時，請專注於含義：找出術語、找出它們共用的說明，並確認段落分隔不會意外變成不同的值。確認這些關聯正確後，詞彙表就可以套用文件所需的呈現樣式了。

來源