先看這個例子
這份詞彙表為 HTML 寫一項說明，CSS 則有兩項。內容不是填寫欄位。用說明清單表達名稱和資料的分組，毋須把固定文字變成停用輸入框。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| HTML 一組 | dt 後接一個 dd | 一個名稱、一項說明 |
| CSS 一組 | dt 後接兩個 dd | 一個名稱、兩項相關說明 |
| 輸入控制項 | 查看固定詞彙表 | 沒有 input；本例不是供人修改的欄位 |
瀏覽器怎樣處理
在 dl 內，dt 是名稱，dd 是相關值或說明。連續幾個 dd 都屬前面的名稱組。本例每組只有一個名稱，但這種結構不強制一對一。畫面變窄時，名稱和說明仍要讀得出關係。
只用粗體段落，會少了分組結構
反例文字相近，但全部都是一般段落。粗體不會自行建立 dt、dd 的分組關係。
<p style="font-weight:bold">CSS</p><p>控制呈現方式。</p><p>包括版面配置規則。</p>反例有三個 p，沒有 dl、dt 或 dd。正例的子元素次序是 DT、DD、DT、DD、DD。
試着修正
再加「控制間距」作 CSS 的說明，是否必須先加第二個 CSS dt？
查看參考答案
不用。把另一個 dd 加進現有 CSS 一組即可。只有真的要另開一組、意思不同，才再寫名稱。
- 每個 dd 都要跟正確的名稱組。
- 窄畫面仍保留全部說明，不裁掉內容。