HTML 列表 ul、ol、dl：無序、有序與定義型清單

Q: ul 和 ol 該怎麼選？

看順序有沒有意義。調換之後意思不變的用 ul，例如：商品標籤；有先後步驟、名次或排行的用 ol，例如：操作流程。挑選的依據是語意，不是預設樣式長什麼樣。

Q: 清單的圓點與數字可以改掉嗎？

可以，用 CSS 的 list-style 就能換符號或整個移除。導覽列常用清單包連結再把符號拿掉，這樣既保有清單語意，外觀也乾淨。

Q: ul 底下可以直接放 div 嗎？

不行。ul 與 ol 的直接子元素只能是 li，要放其他內容請包在 li 裡面。dl 的直接子元素則是 dt 與 dd。

Q: 有序列表可以不從 1 開始嗎？

可以。start 屬性能指定起始數字，reversed 可以倒著數，type 則能換成英文字母或羅馬數字。

用來設定無排序、有排序、定義的資訊，分別對應 <ul>、<ol> 與 <dl> 三種列表。挑選的依據是語意而不是外觀，子元素也只能放特定的標籤，需要階層時可以互相巢狀；<ol> 另有 start 與 reversed 可以調整編號。

元素	語意	子元素
`<ul>`	順序不重要的清單	`<li>`
`<ol>`	順序有意義的清單	`<li>`
`<dl>`	名詞與解釋的配對	`<dt>`、`<dd>`

無排序列表

清單中的順序毫無意義，預設樣式為黑色實心的圓點、縮排。

html

<ul>
  <li>蘋果</li>
  <li>葡萄</li>
  <li>哈密瓜</li>
  <li>鳳梨</li>
  <li>火龍果</li>
</ul>

有排序列表

清單中的內容有順序，預設樣式為標號數字、縮排。

html

<ol>
  <li>起床</li>
  <li>刷牙</li>
  <li>吃早餐</li>
  <li>換衣服</li>
  <li>出門上班去</li>
</ol>

小提醒

<ul>、<ol> 的子層嵌套只能是 <li>，不能嵌套其他元素。

常用屬性

html

<!-- 從第 5 項開始編號 -->
<ol start="5">...</ol>

<!-- 倒著數，適合排行榜 -->
<ol reversed>...</ol>

<!-- 換成英文字母：a、b、c -->
<ol type="a">...</ol>

定義型列表

用來表現特殊名詞的定義，預設樣式為縮排。

html

<!--
dl: 列表
dt: 項目
dd: 內容
-->
<dl>
  <dt>HTML</dt>
  <dd>用來描述網頁的內容和語意結構。</dd>
  <dt>CSS</dt>
  <dd>用來描述網頁的樣式和畫面如何被呈現。</dd>
  <dt>JavaScript</dt>
  <dd>用來描述網頁的行為，讓網頁可以跟使用者互動。</dd>
</dl>

小提醒

<dl> 的子層嵌套只能是 <dt>、<dd>，不能嵌套其他元素。

同場加映: 巢狀清單

巢狀清單的用法非常地普遍，請一定要熟悉它的結構及規則。

html

<ul>
  <li>體育新聞
    <ul>
      <li>棒球</li>
      <li>藍球</li>
      <li>高爾夫球</li>
    </ul>
  </li>
  <li>財經新聞
    <ul>
      <li>股票</li>
      <li>債券</li>
      <li>期貨</li>
    </ul>
  </li>
</ul>

小提醒

內層的清單要寫在 <li> 裡面，不能直接放在 <ul> 底下，否則就違反了子元素只能是 <li> 的規則。

導覽列也是一種清單

一組導覽連結在語意上就是一份清單，實務上常用 <ul> 包起來，再用 CSS 把圓點去掉：

html

<nav>
  <ul>
    <li><a href="/html/what-is-html">HTML</a></li>
    <li><a href="/css/what-is-css">CSS</a></li>
    <li><a href="/javascript/what-is-javascript">JavaScript</a></li>
  </ul>
</nav>