语义化布局的核心是按内容本质精准选用html5标签：article用于可独立分发的内容（如博客、新闻），section用于有主题的逻辑分组（如“关于我们”），main必须唯一且不嵌套，header/footer可多级复用，nav专指主导航，aside表示相关但非主线信息；配合bem命名实现样式解耦，并通过无障碍面板和纯结构验证确保语义生效。
HTML5布局结构不是把标签堆满页面，而是让每个标签承担明确的内容角色。语义标签在模块化中的价值，不在于“用了多少”，而在于“用得是否准确”——它让模块可读、可复用、可被机器理解。
按内容本质选标签，而非按视觉位置
一个模块该用 section 还是 article，关键看内容能否独立存在：新闻条目、博客正文、用户评论，自带完整上下文和传播价值，就该用 article；而“关于我们”“服务流程”“客户评价”这类按主题组织的区块，用 section 更贴切。header 和 footer 同样如此——它们可以出现在整个页面顶部/底部，也可以嵌套在 article 或 section 内部，表示该模块自身的头尾信息。
- 导航菜单无论放在顶部还是侧边，只要它是站点级主路径，就用 nav 包裹
- aside 不等于“右边栏”，而是指与当前内容相关但非主线的信息，比如某篇技术文章旁的术语解释框
- main 必须唯一，且只包裹真正不可替代的核心内容，不能把它当“大容器”塞进 header 或 nav
模块封装要兼顾结构语义与样式可控
语义化模块不是写完 HTML 就结束，还需配合命名规范支撑复用。BEM（Block__Element--Modifier）是常用策略：以 article 为例，可定义 <article class="post"><h2 class="post__title">标题</h2>
<time class="post__date">2026-06-14</time></article>。这样既保留了 article 的语义主体性，又通过类名实现样式解耦与状态控制（如 post--featured）。
- 避免给语义标签加纯样式类，如
<header class="clearfix"></header>—— clearfix 是表现层细节，应由 CSS 处理 - 公共模块（如页头、页脚）可用 template 标签或构建工具抽离，但内部结构仍需保持语义完整性
- 同一类模块多次出现时，确保嵌套逻辑一致，例如每个 article 都含标题（h1–h6），便于大纲生成与屏幕阅读器解析
嵌套有规则，错用会破坏语义可信度
HTML5 对语义标签的嵌套有隐含逻辑约束，违反它会让结构“看起来对、实际错”。例如 main 不能作为 article 的子元素，因为 main 表示整页唯一主体，而 article 是可复用的独立单元；footer 若放在 article 外却包含作者信息，就属于语义错位——作者归属的是文章，不是整页。
- nav 可独立存在，也可嵌在 header 或 aside 中，但不应出现在 footer 里充当次要链接组
- section 应有明确主题，且建议自带 heading，否则易与 div 混淆
- 图文组合优先用 figure + figcaption，比单纯 div + p 更准确表达“图及其说明”的语义关系
验证语义是否真正生效
写完代码不等于语义落地。浏览器开发者工具的“无障碍”（Accessibility）面板能直观显示结构树和角色（role）；Lighthouse 的 SEO 和无障碍审计项也会提示语义缺失或误用。更直接的方式是关闭 CSS 查看纯结构——如果还能清晰分辨“这是导航”“这是正文”“这是侧边推荐”，说明语义已立住。
- 检查 heading 层级是否连续，避免 h1 跳到 h3
- 用屏幕阅读器朗读页面，确认导航、主内容、页脚等区域能被正确识别和跳转
- 搜索爬虫模拟抓取时，观察 article 和 main 内容是否被优先索引
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
