[HTML]dd 裡面不能故放入dd標籤

2017-02-23 158 words One minute

Contents

在除錯一個版面問題時花了將近一整天，最後發現是在 <dd> 標籤內部又嵌套了另一個 <dd> 標籤，這是 HTML 規範不允許的寫法。記錄一下正確用法，避免再踩同樣的雷。

`<dl>`、`<dt>`、`<dd>` 的正確結構

<dl>（Description List）是 HTML 的定義列表元素，結構規則如下：

<dl>：定義列表的容器
<dt>：定義術語（Definition Term）
<dd>：定義描述（Definition Description），緊跟在 <dt> 之後

1
2
3
4
5
6
7
8


<!-- 正確寫法 -->
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language，超文字標記語言</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets，層疊樣式表</dd>
</dl>

`<dd>` 不能包含 `<dd>`

根據 HTML 規範，<dd> 的內容模型（Content Model）是 Flow Content，不包含 <dt> 或 <dd> 本身。以下是錯誤的寫法：

1
2
3
4
5
6
7
8


<!-- 錯誤寫法：dd 裡面嵌套 dd -->
<dl>
    <dt>程式語言</dt>
    <dd>
        <dd>Python</dd>   <!-- 這是錯的！ -->
        <dd>JavaScript</dd> <!-- 這是錯的！ -->
    </dd>
</dl>

正確的巢狀列表做法

如果需要在定義項目下列出多個子項目，應該在 <dd> 內使用普通的列表元素：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!-- 正確：在 dd 內用 ul/ol -->
<dl>
    <dt>程式語言</dt>
    <dd>
        <ul>
            <li>Python</li>
            <li>JavaScript</li>
            <li>Go</li>
        </ul>
    </dd>
</dl>

一個 `<dt>` 對應多個 `<dd>`

HTML 規範允許一個術語對應多個描述，以下是合法的：

1
2
3
4
5
6


<dl>
    <dt>JavaScript</dt>
    <dd>一種輕量級、直譯式的程式語言</dd>
    <dd>主要用於網頁前端互動開發</dd>
    <dd>也可用於後端（Node.js）</dd>
</dl>

常見錯誤整理

錯誤寫法	說明
`<dd>` 內嵌套 `<dd>`	不符合規範，瀏覽器解析行為不可預期
`<dd>` 內嵌套 `<dt>`	同樣不合法
`<dl>` 內直接放文字	必須透過 `<dt>` 或 `<dd>` 包裝
`<dt>` 和 `<dd>` 不成對	語意上不完整，雖不會報錯但不建議

瀏覽器對於不合法的 HTML 通常會嘗試自動修正，但修正結果因瀏覽器而異，容易造成排版跑版且難以除錯。養成寫合法 HTML 的習慣，可以省去很多排查時間。