语义化布局的核心是让每个标签精准对应内容意图，而非简单替换div；需严格遵循header可多层复用、nav仅用于导航链接集合、main全局唯一且不得嵌套、article须独立成块、section必带标题、aside限于弱关联补充信息等规则。
语义化布局不是给 div 换个名字，而是让每个标签真正承担它该表达的内容角色。在复杂页面中，层级混乱、标签滥用、嵌套错位，最容易导致 SEO 偏差、屏幕阅读器误读、维护成本飙升——关键不在“用了多少语义标签”，而在“每个标签是否精准对应内容意图”。
明确内容角色，先分清“谁管什么”
复杂页面常含多级结构：整站导航、栏目页头、文章列表、单篇文章、评论区、侧边推荐……每一块都需匹配最贴切的语义标签：
-
header 可多次出现——页面顶部一个，每篇
内部一个（含标题+时间），每个 也可配一个（如“技术方案”小节的标题） - nav 只包裹“可跳转的导航链接集合”：主导航、面包屑、文章内目录（toc）、底部分类导航均可独立用
-
main 全局唯一，且必须直接包裹核心内容；不能嵌套在
、 -
article 要能“拆出来就成立”——博客正文、用户评论、产品卡片、论坛帖子都适用；首页轮播图+栏目入口这种聚合页，不该用
包裹整块 -
section 必须带标题（
–
），否则语义失效；适合组织逻辑相关但不独立的内容，比如“性能优化技巧”“兼容性说明”等子章节
-
aside 不是“所有侧边内容”，而是与当前上下文相关但非必需的信息：文章旁的作者简介、同类推荐、引用来源、广告位——若广告与主文无关，应移出
单独处理
嵌套讲逻辑，拒绝“标签堆砌”
复杂页面容易陷入两种错误：一是把
- 整页结构： →
（站点头）→ - 列表页结构：
→ （栏目标题）→ （条目1）→ （条目2）→ - 避免：
里再包 或
配合标题层级与无障碍支持
语义标签只有和标题结构（h1–h6）对齐，才能生成有效文档大纲，这对 SEO 和读屏体验至关重要：
- 整页
用 ；
的 用 ；其内部
用 ，依此类推，不可跳级或降级
- 多个
并列时，各自 中的标题应为同级（如都是 ），保持大纲扁平清晰
- 对无文本的交互元素（如图标按钮、筛选控件），补
或 ；<nav> 加 <aria-label></aria-label>，方便辅助技术区分</nav> - 避免用
在
模块化封装，从结构出发而非样式出发
复杂页面常复用组件（新闻卡片、产品卡片、评论框），应基于语义定义而非 class 命名：
- 新闻卡片 =
→ 标题
时间
摘要
- 侧边工具栏 =
- 带摘要的 FAQ 条目 =
→ Q：怎么重置密码？
→A：点击登录页“忘记密码”… - 避免：用 替代
，再靠 CSS 模拟语义——机器无法识别，SEO 和无障碍全丢失
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
