html5语义化标签自动生成清晰文档大纲：main必须唯一且直接包裹核心内容；article用于可独立理解的内容，section用于逻辑分组；标题层级需严格对齐结构；nav、header、footer、aside须按上下文合理使用。
用对 HTML5 语义化标签，文档大纲就自然清晰——它不是靠手动编号或注释凑出来的，而是由标签本身携带的层级含义和嵌套关系自动生成的。
main 必须唯一，且直接包裹核心内容
一个页面只能有一个 main，它代表用户真正要读、要操作的部分。导航栏、页脚版权、侧边广告这些干扰项，一律不能塞进去。
- ✅ 正确：main 直接放在 body 下，子元素就是文章标题、正文段落、评论入口等不可删减的内容
- ❌ 错误：把 main 套在 div 或 section 里；或让它包含 nav、aside、footer
- ⚠️ 注意：main 内可以有多个 article，但 article 里不能再嵌套 main
article 和 section 要按“能否独立存在”来区分
判断标准很实在：把这块内容单独复制出来，还能不能被理解？能，就用 article；不能，就用 section。
- article 适合博客正文、新闻稿、用户评论——自带标题、时间、作者，RSS 可订阅，打印也完整
- section 是逻辑分组，比如“产品特性”“使用步骤”“常见问题”，必须配合 h2–h6 标题才有意义
- 别用 section 包裹纯图标、空白占位符或装饰性分割线——那该用 div
标题层级必须与语义结构对齐
h1–h6 不是字号开关，而是大纲锚点。浏览器、读屏器、搜索引擎都靠它生成导航树。
- main 或顶级 article 里放 h1；每个 article、section 内部用 h2 开始，逐级向下
- 禁止跳级：h1 后直接 h3，会打断大纲逻辑，让辅助技术丢失中间层级
- 一个页面通常只用一个 h1（除非多主内容场景，且需 aria-labelledby 补充说明）
nav、header、footer 要匹配所属上下文
它们可以多次出现，但每次都要“服务好自己的父容器”。
- nav 只包主导航链接——顶部菜单、左侧栏目树。页脚一堆友情链接、文章末尾的“上一篇/下一篇”，一般不用 nav
- header 出现在页面顶部时，可含 logo 和主导航；出现在 article 内时，就该只含这篇文的标题和发布时间
- footer 放页脚版权信息；若出现在 article 内，则适合放作者签名、许可声明等归属信息
- aside 不等于“在右边”，而是指与主内容相关但可分离的信息，如“相关推荐”“作者简介”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
