HTML5语义架构重在用结构表达内容关系，main必须唯一且直接位于body下；article用于可独立分发的内容单元，section需带标题并围绕单一主题；nav仅用于主导航，aside须与主内容相关且可移除；header和footer作用域依附于最近节元素。
HTML5语义架构不是给标签贴标签，而是用结构表达内容关系。核心在于让机器（搜索引擎、屏幕阅读器）和人一眼看懂“哪部分是主干、哪部分是分支、哪部分可独立存在”。关键不在多用语义标签，而在用对层级和边界。
main 必须唯一且裸露
一个页面只能有一个 main，它必须直接位于 body 下，不能被 article、section、aside 或任何其他语义容器包裹。它代表整页不可替代的核心内容区域。
- 错误写法：
<article><main>...</main></article>—— main 被降级为文章内部块，失去全局主内容意义 - 正确写法：
<body><header>...</header><nav>...</nav><main>...</main><footer>...</footer></body> - main 内可自由嵌套 article、section、aside，但这些子元素不改变 main 的唯一性地位
article 和 section 的分工很明确
article 是“能单独发 RSS、能单独打印、能单独被引用”的内容单元；section 是“为了讲清楚一个主题而组织的一组内容”，必须带标题。
- 博客首页：多个 article 并列放在一个带 <h2>最新文章</h2> 的 section 内
- 单篇博客页：整个内容用一个 article 包裹，其内部可用多个 section 划分“背景”“原理”“示例”等小节，每个 section 都要有 h3 或更高级别标题
- 避免：section 里只包一个没标题的 article —— 这属于冗余嵌套，直接用 article 即可
nav 和 aside 有硬性使用前提
nav 不是“所有导航链接的收纳盒”，aside 也不是“侧边栏样式占位符”。它们的语义由内容关系决定，而非视觉位置。
立即学习“前端免费学习笔记（深入）”；
- nav 仅用于主导航：顶部菜单、左侧站点目录、页脚的全局链接集合。面包屑、文章内“上一篇/下一篇”、评论区操作按钮都不属于 nav
- aside 必须满足“移除它，主内容依然完整可读”。作者简介、术语解释、相关文章推荐可放 aside；广告、随机弹窗、无关推荐应使用 div
- 两者都禁止塞进无功能的空壳：nav 里没链接、aside 里没与主文关联的信息，等于误导解析器
header 和 footer 的作用域是就近的
它们不是全局限定词，而是依附于最近的节元素（body、article、section）。同一个页面可以有多个 header，但每个只服务它的父容器。
- body 级 header：放网站 logo、主导航、搜索框
- article 级 header：放该文章的 h1 标题、作者、time 发布时间
- section 级 header：必须含 h2–h6 或等效标识（如带 aria-label 的 logo 图），否则语义断裂，不如不用
- footer 同理：页面底部版权信息属于 body 级 footer；某篇文章末尾的“编辑说明”或“参考资料”属于 article 级 footer
