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