為什麼「div」元素內只有一行文字，卻能直接寫上去？

更新日期： 2024 年 9 月 14 日

乳題，我發現有人會直接在「div」元素內添加文字，我好奇難道不需要特別加「p」段落嗎？

直接寫文字
<div>lorem20
</div>

有特別新增 p 元素
<div>
   <p>lorem20
   </p>
</div>

經過查詢後，若以「程式後續維護性」的觀點，會建議後者的寫法為佳。

「div」元素是一種無特定語意的「通用內容元素」，通常我們會把它當作一種容器，用來用包裹其他 HTML 元素（例如 p、a、li 等）。

因此，若直接在「div」 後面接上一段文字，則會限縮 div 容器的特性，將原本無特定語意的元素優勢，限縮成只具段落意涵的容器。

白話文說，原本 div 是個能放各式各樣物品的箱子，但若直接將箱子凹成一支筆的形狀與大小，變形的箱子就會限縮之後再放置其他物品的空間與功能。

以上就是這次的問題，我們下次見！