XML/HTML 中單標簽與雙標簽的區別與使用場景

定義對比

核心區別

• 內容模型：雙標簽擁有開始/結束標簽，中間可包裹子節點（元素、文本）；單標簽僅自身，無內容區域。
• 語義：雙標簽通常表示結構容器；單標簽表示獨立資源引用（圖片）、換行、元數據等原子功能。
• XHTML/HTML5 寫法：XHTML 強制單標簽自閉合 <br />；HTML5 兩種寫法均合法 <br> / <br />。

布局實戰建議

1. 佈局容器：必須用雙標簽（div, section, article）。
2. 葉子元素：圖片、輸入框、換行用單標簽。
3. 語義化優先：按內容含義選標簽，勿濫用 div/span。

常見錯誤

<!-- 錯誤：單標簽嘗試包裹內容 -->
<img>這是圖片說明</img>  ✗

<!-- 正確：用 figure + figcaption -->
<figure>
  <img src="a.jpg" alt="說明">
  <figcaption>這是圖片說明</figcaption>
</figure>  ✓

理解單雙標簽的內容模型差異，能編寫語義正確、結構清晰的 XML/HTML 文檔。