header、section、aside是按内容角色分层协作的语义单元：header提供上下文引导，section承载主线内容主体，aside补充关联但可分离的信息。
header、section、aside 不是并列“平级容器”，而是按内容角色分层协作的语义单元：header 提供上下文引导，section 承载主线内容主体，aside 补充关联但可分离的信息。三者共同构成清晰、可读、可访问的页面骨架。
header 是内容区块的“介绍名片”
它不专指页面最顶部横条，而是为任意内容单元提供引导性信息。一个页面可以有多个 header —— 页面级的放在
开头，文章级的嵌在- 页面级 header 通常含 logo、主标题、主导航（常配合
- 区块级 header 放该 section 的标题、作者、发布时间等，比如：
响应式设计原理
- 避免仅用 header 做样式占位；没有实际介绍性内容时，不强行添加
section 是主题明确的内容“逻辑分组”
它代表一个有统一主题的完整内容段落，必须自带标题（
–），否则就失去语义依据，应改用 。
- 常见场景：一篇教程里的“安装步骤”“配置说明”“常见问题”各为一个
- 可嵌套使用：大主题下再分小主题，如
（前端工具链）内含多个子 （Vite / Webpack / Rollup）
- 不要用 section 替代样式布局——没有语义分组需求，就别用
aside 是主内容的“语义旁白”
它和主内容相关，但不是主线推进所必需；抽掉它，主流程依然成立。位置灵活，可在 section 内部，也可在 body 级别。
- 在 article 内部时，表示该文的术语解释、引用来源或延伸阅读
- 在 body 级别时，常表现为全站侧栏：最新文章、标签云、广告位、作者简介
- 不能放主导航或页脚链接——那些属于全局结构，不是“附属信息”
三者协作的典型结构是：定调 → 展开 →
。
- 常见场景：一篇教程里的“安装步骤”“配置说明”“常见问题”各为一个
- 可嵌套使用：大主题下再分小主题，如
（前端工具链）内含多个子 （Vite / Webpack / Rollup） - 不要用 section 替代样式布局——没有语义分组需求，就别用
aside 是主内容的“语义旁白”
它和主内容相关，但不是主线推进所必需；抽掉它，主流程依然成立。位置灵活，可在 section 内部，也可在 body 级别。
- 在 article 内部时，表示该文的术语解释、引用来源或延伸阅读
- 在 body 级别时，常表现为全站侧栏：最新文章、标签云、广告位、作者简介
- 不能放主导航或页脚链接——那些属于全局结构，不是“附属信息”
三者协作的典型结构是：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
