html5语义化布局应优先掌握header、nav、main、aside、footer五标签；section需配标题，main仅限1次且不可嵌套，aside适用独立相关内容，nav专用于导航链接集合，语义化核心是准确表达内容角色。
html5 页面布局不需要从“完整页面结构”开始学，先搞懂
、
、、
、
这五个语义化标签怎么用，比死记 DOCTYPE 和 meta 标签管用得多。
为什么
不再是唯一选择？
过去靠一堆
模拟结构，浏览器和屏幕阅读器完全不知道它真是页头；HTML5 引入的语义化标签让机器能“读懂”页面逻辑。但注意：
不等于“一个区块”，它必须有标题（
–
），否则不如用
。
-
、
、
、
内
-
- 所有语义标签默认是块级元素，无需额外设
display: block
的使用边界在哪？
专指“导航链接集合”，不是所有链接都该包进去。页脚里的“关于我们”“隐私政策”链接通常不放
，而顶部主导航、面包屑、站内搜索入口可以。
- 多个导航区可以有多个
和
- 如果导航只有 1–2 个链接（如“登录/注册”），用
更轻量
- 不要把
常见错误：嵌套混乱导致无障碍失效
屏幕阅读器依赖 dom 结构播报内容顺序。
放在
塞进
里又没配
，就会让辅助技术误判层级。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
文章标题 正文…
（缺少标题元素，
在
内应配合
或更高阶标题）
- 正确写法：
文章标题
正文…
- 避免
：页头页脚属于整页，不是主内容的一部分
真正卡住新手的往往不是标签写不对，而是没想清楚“这段内容对用户意味着什么”。语义化不是加标签凑数，是告诉浏览器：“这里是一段独立的、可被跳过的、有明确角色的内容”。
包单个按钮，问题就出在这里。
不再是唯一选择？
过去靠一堆
模拟结构，浏览器和屏幕阅读器完全不知道它真是页头；HTML5 引入的语义化标签让机器能“读懂”页面逻辑。但注意：
不等于“一个区块”，它必须有标题（
–
），否则不如用
。
-
、
、
、
内
-
- 所有语义标签默认是块级元素，无需额外设
display: block
的使用边界在哪？
专指“导航链接集合”，不是所有链接都该包进去。页脚里的“关于我们”“隐私政策”链接通常不放
，而顶部主导航、面包屑、站内搜索入口可以。
- 多个导航区可以有多个
和
- 如果导航只有 1–2 个链接（如“登录/注册”），用
更轻量
- 不要把
常见错误：嵌套混乱导致无障碍失效
屏幕阅读器依赖 dom 结构播报内容顺序。
放在
塞进
里又没配
，就会让辅助技术误判层级。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
文章标题 正文…
（缺少标题元素，
在
内应配合
或更高阶标题）
- 正确写法：
文章标题
正文…
- 避免
：页头页脚属于整页，不是主内容的一部分
真正卡住新手的往往不是标签写不对，而是没想清楚“这段内容对用户意味着什么”。语义化不是加标签凑数，是告诉浏览器：“这里是一段独立的、可被跳过的、有明确角色的内容”。
包单个按钮，问题就出在这里。