若要正確巢狀 HTML 清單，請將每個子清單放在所屬的清單項目內，並置於該項目的結束標籤之前。本指南將示範如何在 Mac 上使用 TextEdit 和 Safari 建立、儲存並預覽一個三層範例。

巢狀 HTML 清單應放在哪裡？

HTML 清單由兩個結構部分組成：清單容器和清單項目。無序清單使用 <ul>，有序清單使用 <ol>。每個一般項目都以 <li> 和 </li> 包住。巢狀清單應放在其中一個項目內。Google 的清單指南示範了這種確切的巢狀模式。

基本順序是：開啟父項目、寫上標籤、插入完整的子清單，然後關閉父項目。讓結束標籤清楚可見，有助於檢查彼此的關係。

以下正確的 HTML 片段讓 Group A 有兩個子項目，同時讓 Group B 保持在外層：

<ul>
  <li>Group A
    <ul>
      <li>Item A1</li>
      <li>Item A2</li>
    </ul>
  </li>
  <li>Group B</li>
</ul>

從內向外讀取結束標籤。首先，每個子項目都會關閉。接著，內層清單以 </ul> 關閉。然後 Group A 以 </li> 關閉。只有在這之後，Group B 才會開始。這提供了一個實用的檢查方式：找出父項目的開啟和結束標籤，確認整個子清單都位於兩者之間。

HTML 標準允許 <li> 元素包含流內容，其中包括清單。<ul> 和 <ol> 的內容模型允許清單項目和支援指令碼的元素；不允許在外層容器內直接放入另一個清單容器。請參閱 HTML 標準的群組內容定義。

分別為每一層選擇清單類型

思考一下：如果項目順序改變，含義也會改變嗎？如果會，請選擇 <ol>。如果這些項目是一組不受順序影響的集合，請選擇 <ul>。每個子清單都要各自套用這個判斷方式。Mozilla 的有序清單文件說明了順序判斷方式，以及混用清單類型的做法。

以下範例中的 Group A 和 Group B 是中性的分類，因此外層清單採用無序清單。Item A1 和 Item A2 也屬於無序集合。在 Item A2 下方，開啟範例文件先於重新命名，因此這兩項指示採用有序清單。

內容關係 清單選擇 放置位置
一組群組 <ul> 包住群組項目
屬於 Group A 的項目 <ul> 放在 Group A 的 <li> 內
屬於 Item A2 的步驟順序 <ol> 放在 Item A2 的 <li> 內
屬於 Group B 的項目 <ul> 放在 Group B 各自的 <li> 內

將項目符號改成數字，不需要改變巢狀方式。父項目仍然包住整個子清單。Mozilla 的文件明確支持在多個深度混用有序和無序清單。有序清單使用說明

在 TextEdit 中建立完整的巢狀清單文件

以下範例是完整的 HTML 文件。它使用虛構標籤，不需要下載資源或其他程式碼。其結構包含四個清單和八個清單項目：兩個外層群組、分屬這兩個群組的四個項目，以及 Item A2 下方的兩項指示。

在 TextEdit 中選擇 File > New，然後選擇 Format > Make Plain Text。貼上以下完整範例。Apple 在其 TextEdit HTML 指南中說明了使用純文字建立 HTML 檔案的工作流程。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample workspace outline</title>
</head>
<body>
  <h1>Sample workspace outline</h1>
  <ul>
    <li>Group A
      <ul>
        <li>Item A1</li>
        <li>Item A2
          <ol>
            <li>Open the sample document.</li>
            <li>Rename the sample document.</li>
          </ol>
        </li>
      </ul>
    </li>
    <li>Group B
      <ul>
        <li>Item B1</li>
        <li>Item B2</li>
      </ul>
    </li>
  </ul>
</body>
</html>

選擇 File > Save，將檔案命名為 nested-lists.html，並儲存到容易找到的位置。如果 TextEdit 詢問要使用哪個副檔名，請選擇 Use .html。這些是 Apple 說明的 HTML 儲存步驟。只複製圍欄區塊內的程式碼；不要包含 Markdown 圍欄標記行。

在 Finder 中選取已儲存的檔案，然後選擇 File > Open With > Safari。Apple 在在 Mac 上選擇用來開啟檔案的 App中，說明了如何透過 File > Open With 選取應用程式。

將預覽與以下預期關係進行比較：

  • Group A 和 Group B 在外層同層排列。
  • Item A1 和 Item A2 屬於 Group A。
  • 兩項編號指示只屬於 Item A2。
  • Item B1 和 Item B2 屬於 Group B。

也要對照原始碼檢查這些關係，而不只是檢視畫面。此範例的明確標籤和清單父子關係已透過程式檢查；此處並未測試其在 Safari 中的外觀。

診斷子清單掛在錯誤項目下的問題

如果現有文件的文字正確但層級錯誤，請依照以下順序處理。一次檢查一個父項目及其直接子項目，並從外層清單開始。

1. 找出過早關閉的父項目

以下錯誤片段在子清單開始前就關閉了 Group A：

<ul>
  <li>Group A</li>
  <ul>
    <li>Item A1</li>
  </ul>
</ul>

此處，內層 <ul> 是外層 <ul> 的直接子項目。將 Group A 的 </li> 移到內層 </ul> 之後，讓父項目包住子清單。此修正遵循 Google 巢狀清單範例所示的放置規則。

2. 檢查結構正確但父項目錯誤的情況

清單即使符合巢狀規則，描述的關係仍可能不正確。例如，把編號指示放在 Item A1 內，就會讓它們隸屬於 Item A1，即使原本想放在 Item A2 下也是如此。只有正確語法，無法表達你預期的分組方式。

對每個子清單都問自己：「哪個項目的開啟標籤包住了整個清單？」將該項目的標籤與預期的父項目進行比較。在完整範例中，從編號指示往外追溯，應會先到達 Item A2，再到 Group A。如果追溯到其他標籤，請先移動整個子清單，再調整外觀。

3. 編輯時明確寫出結束標籤

在特定條件下，HTML 允許省略項目的結束標籤 </li>，包括緊接著另一個項目的情況。你不必依賴這種簡寫。學習或修復巢狀結構時，請寫出每個項目的結束標籤，讓每個邊界都清楚可見。Mozilla 在其清單項目技術摘要中列出確切的省略條件。

使用一致的縮排輔助編輯：將子清單縮排到父項目標籤之下，並讓相對應的清單開啟和結束標籤對齊。接著檢查實際的標籤邊界。縮排能讓預期關係更容易閱讀；真正建立這種關係的是包住子項目的元素。

4. 將段落包裝元素維持在各自的範圍內

如果父項目標籤需要段落，請在開啟子清單之前關閉該段落，同時讓兩者都保持在父項目內。HTML 標準指出，清單容器不能作為 <p> 元素的子項目。HTML 段落內容規則

以下有效片段讓標籤段落和子清單一同位於 Group A 內：

<ul>
  <li>
    <p>Group A</p>
    <ul>
      <li>Item A1</li>
    </ul>
  </li>
</ul>

重新開啟原始碼，並在修改時保留層級

如果在 TextEdit 中重新開啟檔案時看到的是格式化內容而不是標籤，請選擇 File > Open，選取檔案，按一下 Show Options，選取 Ignore rich text commands，再按一下 Open。對於之後建立的檔案，Apple 也提供 TextEdit > Settings > Open and Save，以及 Display HTML files as HTML code instead of formatted text 選項。在 TextEdit 中將 HTML 檢視為程式碼

移動項目時，請一併移動其完整的 <li> 區塊，包括其中包含的任何子清單。例如，移動 Item A2 時，必須一併移動其兩項指示。若只移動標籤，這些指示就會留在原處，改變文件預期的分組方式。

儲存修訂版本前，請檢查三件事：每個子清單都由預期的父項目包住；同層項目仍維持必要的順序；每個清單都依照順序是否重要而使用項目符號或編號。儲存檔案，在 Safari 中重新開啟，並將畫面上的群組與預期的大綱進行比較。讓每個父項目和其完整子樹維持在一起，日後的修改會更容易檢查。

來源