| 類別 | 標籤範例 | 特點 | 功能 |
|---|---|---|---|
| 塊級元素 | div, h1-h6, p, ul/ol/li, table, form, header, footer, section, article | 獨佔一行、可設寬高/邊距、預設寬度 100% | 頁面骨架、佈局容器、承載內容 |
| 行內元素 | span, a, strong, em, img, input, label, b, i, u, br | 不換行、不可設寬高/垂直邊距、寬度由內容決定 | 文本修飾、細節控制、表單控件 |
<div><span></span><a></a></div> <!-- 正確：行內並列 -->
<div><span></span><p></p></div> <!-- 錯誤：行內包塊級 --><div><span></span></div> <!-- 正確 -->
<span><div></div></span> <!-- 錯誤 -->h1-h6, p, dt 不能包含其他塊級元素
<p><div></div></p> <-- 錯誤：瀏覽器會自動修正為 <p></p><div></div>li 可包 div (兩者皆為容器)ul>li、ol>li、dl>dt/dd、table>tr>td、select>optionHTML5 依內容語義分類，不再單純看 display：
| 類別 | 描述 | 典型標籤 |
|---|---|---|
| Metadata (元數據) | 文檔關係、行為配置 | base, link, meta, noscript, script, style, title |
| Flow (文檔流) | 主體內容大部分元素 | div, p, h1-h6, ul, table, form, header, footer... |
| Sectioning (區塊) | 定義標題/頁腳範圍 | article, aside, nav, section |
| Heading (標題) | 區塊標題 | h1-h6, hgroup |
| Phrasing (語句) | 段落級文本標記 | span, a, strong, em, img, input, br... |
| Embedded (內嵌) | 引入外部資源 | audio, video, img, canvas, iframe, svg |
| Interactive (交互) | 用戶交互 | a, button, details, embed, iframe, label, select, textarea |
| 父標籤 | 允許的子內容類別 | 禁止嵌套 |
|---|---|---|
| h1-h6, p | Phrasing | Flow、Sectioning、Heading、Interactive |
| header, footer | Flow (但不可嵌套 header/footer) | header, footer |
| a | Transparent (繼承父元素允許類別) | Interactive (不可嵌套 a、button 等) |
| form | Flow | form (不可巢狀 form) |
| button | Phrasing | Interactive |
| caption | Flow | table |
| dt, th | Flow | header, footer, Sectioning, Heading |
<article>、<section>、<nav> 替代無意義 <div>display: block/inline-block/flex/grid 可改變視覺行為，但不改變內容模型限制
