核心差異：語義 vs 容器
| 標籤 | 語義 | 預設樣式 | 允許嵌套 | 典型用途 |
|---|
| <p> | 段落 (Paragraph) | 上下邊距 (margin) | 僅內聯元素 | 文章段落、文字區塊 |
| <div> | 分割/容器 (Division) | 無 (display: block) | 任何流式內容 | 版面區塊、包裝元素 |
語義化為何重要？
- 無障礙存取：螢幕閱讀器依語義導覽，
<p> 會宣告「段落」，<div> 無宣告。
- SEO：搜尋引擎權重
<p> 內文字 > <div>。
- 維護性：語義明確的程式碼自文件化，減少註解需求。
錯誤 vs 正確範例
<!-- ❌ 錯誤：div 包裝單行文字，缺乏語義 -->
<div>這是一段重要說明</div>
<!-- ✅ 正確：段落語義明確 -->
<p>這是一段重要說明</p>
<!-- ✅ 正確：div 作為版面容器包裝多個段落 -->
<div class="article-content">
<p>第一段內容...</p>
<p>第二段內容...</p>
</div>
<!-- ❌ 錯誤：p 不能嵌套區塊元素 -->
<p>
<div>內容</div> <!-- 瀏覽器會自動修正為分離結構 -->
</p>
HTML5 新增語義標籤建議搭配
<article>、<section>、<aside> 替代大量 <div><main> 標示主要內容區<figure> + <figcaption> 圖文組合
CSS 重置建議
/* 統一 p 的預設邊距，避免版面崩壞 */
p { margin: 0 0 1em; }
div { margin: 0; }
