HTML5语义化标签需严格遵循层级规则：main必须唯一且直接位于body下，不得嵌套于article、nav等容器内；header/footer可多层复用但须匹配上下文；section需有标题，article应为独立内容单元；nav仅用于导航链接，aside限于关联性弱的补充信息。
HTML5语义化标签不是随意堆叠的装饰，而是有明确层级约束的结构规则。写错嵌套，轻则影响SEO和屏幕阅读器识别，重则被W3C验证拒绝，甚至导致浏览器自动修正DOM造成意料外的布局偏移。
main必须独立且唯一
main代表页面最核心的内容区域，它不能出现在任何其他语义容器内部——包括
- ✅ 正确：<body><header>...</header><nav>...</nav><main>...</main><footer>...</footer></body>
- ❌ 错误：<article><main>...</main></article>（main 不得是 article 的子元素）
- ❌ 错误：<nav><main>...</main></nav>（main 不得嵌套在 nav 内）
header 和 footer 可多层复用，但需匹配上下文
header 和 footer 不仅能用于整个页面，也能用在
- 例如，在一篇博客文章
中，它的 可包含文章标题 、作者名、发布日期；而页面级
则放网站 logo 和主导航。 - footer 同理：页面级 footer 放版权信息，article 级 footer 可放“本文标签”“相关阅读”等附属内容。
- 注意：不要只为样式目的包裹一个 div 并强行加 header 类名——没有实际语义的 header 就是无效标签。
section 和 article 的嵌套逻辑要清晰
section 表示主题相关的分组内容，必须有标题（
–），否则语义弱于 ；article 表示可独立传播、复用的内容单元（如一篇博文、一条新闻），可嵌套在 或 中，但不应反过来把 当作 article 的“容器”来滥用。立即学习“前端免费学习笔记（深入）”；
- ✅ 合理：
<article><header><h2>标题</h2></header>正文...</article><section><h2>用户评论</h2><article>某条评论</article></section></main>
- ❌ 滥用：
<section><h3>小节标题</h3>...</section></article> —— 若该 section 内容无法脱离 article 独立存在，就只是 article 的一部分，无需额外 section。
nav 和 aside 要严格限定用途
nav 只用于包裹具有导航跳转功能的链接集合；aside 表示与主内容关联较弱、可剥离而不影响主体理解的补充信息（如侧边广告、术语解释、作者简介），不能用来替代 或 做普通布局分区。
- nav 内不宜放按钮、图标、搜索框（除非它们是导航入口）；纯样式的菜单项也不构成语义导航。
- aside 必须与所在上下文有关联——比如在一篇技术文章旁放“相关概念说明”，是合适的；但整页右侧固定广告栏若与当前内容无关，更适合用 div + role="complementary" 明确意图。
- 两者都不应作为布局容器使用：不要用 nav 包裹整个顶部通栏，也不要拿 aside 当右栏通用盒子。
；article 表示可独立传播、复用的内容单元（如一篇博文、一条新闻），可嵌套在 或 中，但不应反过来把 当作 article 的“容器”来滥用。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合理：
<article><header><h2>标题</h2></header>正文...</article><section><h2>用户评论</h2><article>某条评论</article></section></main> - ❌ 滥用：
<section><h3>小节标题</h3>...</section></article> —— 若该 section 内容无法脱离 article 独立存在，就只是 article 的一部分，无需额外 section。
nav 和 aside 要严格限定用途
nav 只用于包裹具有导航跳转功能的链接集合；aside 表示与主内容关联较弱、可剥离而不影响主体理解的补充信息（如侧边广告、术语解释、作者简介），不能用来替代 做普通布局分区。
