建立 2026-09-15 更新 2026-09-15

清單與連結

清單讓步驟與項目可掃讀；超連結讓文件連成網路。這兩種結構幾乎每頁都會用到。寫錯的時候，常見後果是「看起來像清單但其實是一堆獨立段落」，或「連結文字叫人點這裡卻不知道會去哪」。

三種清單

無序清單 ul

項目沒有先後時用 ul，每一項是 li：

<ul>
  <li>編輯器</li>
  <li>瀏覽器</li>
  <li>一份 <code>index.html</code></li>
</ul>

導覽列、功能特點、材料清單通常是無序的。

有序清單 ol

步驟、排名、法律條款用 ol。瀏覽器會自動編號；插入或刪除項目時不必自己改數字。

<ol>
  <li>寫好 HTML 骨架。</li>
  <li>用瀏覽器打開。</li>
  <li>送到 W3C Validator 檢查。</li>
</ol>

描述清單 dl

詞彙與解釋成對出現時用 dl：dt 是詞，dd 是說明。

<dl>
  <dt>DOM</dt>
  <dd>瀏覽器把 HTML 解析成的物件樹。</dd>
  <dt>語意</dt>
  <dd>標籤所表達的意義，而不是外觀。</dd>
</dl>

ul／ol 的直接子元素應為 li。不要把 div 或 p 當成 ul 的直接小孩。

超連結

a（anchor）靠 href 指出目的地：

<p>
  語法查 <a href="https://developer.mozilla.org/zh-TW/docs/Web/HTML">MDN HTML</a>。
</p>

常見 href 寫法

站內連結優先用相對路徑，搬資料夾時比較不容易整站壞掉。

連結文字

把目的寫進連結本身：

<!-- 不好：離開連結就不知道「這裡」是什麼 -->
<a href="https://validator.w3.org/">點這裡</a>

<!-- 較好 -->
<a href="https://validator.w3.org/">W3C HTML 驗證器</a>

新分頁開啟時：

<a href="https://html.spec.whatwg.org/" target="_blank" rel="noopener">HTML Living Standard</a>

rel="noopener" 降低新分頁對原分頁的控制。不要讓站內一般導覽全部 target="_blank"，使用者會被開一堆分頁。

區塊還是行內

ul、ol、p、h1 是區塊層級，會自成一段。a、strong、em 預設是行內，可以放在段落裡。a 也可以包住較大區塊（例如整張卡片），但不要在連結裡面再放連結。

推薦影音

一小時內練清單、連結與基礎標籤

簡述：Bro Code 的 Learn HTML in 1 hour 包含清單、超連結、圖片與表格。可快轉到清單與連結段落，與本頁範例對照。

系統向 Crash Course

簡述：Traversy Media 在示範真實頁面時會寫導覽連結與清單。若首頁還沒看過這支，可在本節跟著做一次導覽列。