HTML 項目列表清單 <ul>, <ol>, <li>, <dl>, <dt>, <dd>

HTML 有三類型的列表清單：

1. 無序的列表 (unordered lists) <ul>
2. 有序的列表 (ordered lists) <ol>
3. 定義的列表 (definition lists) <dl>

無序列表 (unordered lists) <ul>, <li>

<ul> 標籤是用來表示一個沒有順序性的列表清單，<ul> 作為列表的容器 (container)，而用 <li> 來描述個別的項目內容。

舉個例子：

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

實際呈現在畫面中的效果如下：

有序列表 (ordered lists) <ol>, <li>

<ol> 標籤是用來表示一個有順序性的列表清單，<ol> 作為列表的容器，而用 <li> 來描述個別的項目內容。

舉個例子：

<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

實際呈現在畫面中的效果如下：

定義列表 (definition lists) <dl>, <dt>, <dd>

<dl> 標籤是用來表示一系列的特殊名詞定義，<dl> 作為列表的容器，而用 <dt> 和 <dd> 來描述個別的項目內容，其中 <dt> 用來表示被定義的名詞 (Definition Term)，<dd> 用來表示該名詞的說明解釋 (Description Detail)。

舉個例子：

<dl>
  <dt>Denim (semigloss finish)</dt>
  <dd>Ceiling</dd>
  <dt>Denim (eggshell finish)</dt>
  <dt>Evening Sky (eggshell finish)</dt>
  <dd>Layered on the walls</dd>
</dl>

實際呈現在畫面中的效果如下：

多階層 (巢狀式) 項目列表清單 (nested lists)

你可以在任一項目內容 (<li>) 中，嵌入另外的獨立列表，形成一個階層式的列表清單。

舉個例子：

<ol>
  <li>ordered item 1</li>
  <li>
    ordered item 2
    <ul>
      <li>unordered item 2-1</li>
      <li>unordered item 2-2</li>
    </ul>
  </li>
  <li>ordered item 3</li>
</ol>

實際呈現在畫面中的效果如下：