先看這個例子
以下原始碼想把一個 p 放進另一個 p。兩個 id 方便我們在解析後辨認原本想寫的段落。「後面」在第二段之外；讀到最後的結束標記時，已沒有相配的開啟段落。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 第二個開啟標記 | 解析 <p id="second"> | 第一段先關閉，first 和 second 變成同級 |
| 後面的文字 | 查看 </p> 後的「後面」 | 是 body 的文字節點，不在兩個有 id 的段落內 |
| 最後一個不相配的結束標記 | 查看最後的 </p> | 解析器補出一個空段落，合共三個 p |
瀏覽器怎樣處理
在這種解析狀態下，新 p 的開啟標記會先關掉已開啟的段落。因此，原始碼即使縮排成內外兩層，DOM 也不是兩層 p。#first #second 選不到任何元素。畫面能顯示文字，並不代表原始碼結構正確；要查 DOM 才看得出補救結果。
要包兩段文字，改用真正的容器
若本意是同一範圍內有兩段文字，用 section 包住兩個 p。這份對照原始碼寫清楚真正結構，不再依賴瀏覽器補救。
<section id="first"><p>前面</p><p id="second">同一小節內的另一段</p></section>有兩個段落，#first #second 選到一個元素。first 這個 id 現在屬 section，不再屬 p。
試着修正
只刪最後那個多出的 </p>，second 就會變成 first 的子元素嗎？
查看參考答案
不會。第二個 p 開始時，第一段已經被關掉。刪最後結束標記只會少掉補出的空段落，兩個有 id 的段落仍是同級。
- 查解析後的樹：錯例三個 p，容器對照例兩個。
- 每份原始碼另開文件，不沿用改過的 DOM。