html5语义化标签需严格遵循层级规则：main必须唯一且直接位于body下，不得嵌套于article、nav等容器内；header/footer可多层复用但须匹配上下文；section需有标题，article应为独立内容单元；nav仅用于导航链接，aside限于关联性弱的补充信息。

HTML5语义化标签不是随意堆叠的装饰，而是有明确层级约束的结构规则。写错嵌套，轻则影响SEO和屏幕阅读器识别，重则被W3C验证拒绝，甚至导致浏览器自动修正DOM造成意料外的布局偏移。

main必须独立且唯一

main代表页面最核心的内容区域，它不能出现在任何其他语义容器内部——包括

、

、

、

或

。它应直接作为 的子元素之一，与

、

、

并列存在。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• ✅ 正确：
  ...
  ...
  ...
  ...
• ❌ 错误：
  ...
  （main 不得是 article 的子元素）
• ❌ 错误：
  ...
  （main 不得嵌套在 nav 内）

header 和 footer 可多层复用，但需匹配上下文

header 和 footer 不仅能用于整个页面，也能用在

或

内部，表示该区块自身的头部或尾部。关键在于：每个 header 应描述其直接父容器的主题，而不是全局信息。

• 例如，在一篇博客文章
  中，它的

  可包含文章标题

  、作者名、发布日期；而页面级

  则放网站 logo 和主导航。

• footer 同理：页面级 footer 放版权信息，article 级 footer 可放“本文标签”“相关阅读”等附属内容。
• 注意：不要只为样式目的包裹一个 div 并强行加 header 类名——没有实际语义的 header 就是无效标签。

section 和 article 的嵌套逻辑要清晰

section 表示主题相关的分组内容，必须有标题（

–

），否则语义弱于

；article 表示可独立传播、复用的内容单元（如一篇博文、一条新闻），可嵌套在

或

中，但不应反过来把

当作 article 的“容器”来滥用。

• ✅ 合理：

  标题

  正文...

  用户评论

  某条评论
• ❌ 滥用：

  小节标题

  ...
  —— 若该 section 内容无法脱离 article 独立存在，就只是 article 的一部分，无需额外 section。

nav 和 aside 要严格限定用途

nav 只用于包裹具有导航跳转功能的链接集合；aside 表示与主内容关联较弱、可剥离而不影响主体理解的补充信息（如侧边广告、术语解释、作者简介），不能用来替代

或

做普通布局分区。

• nav 内不宜放按钮、图标、搜索框（除非它们是导航入口）；纯样式的菜单项也不构成语义导航。
• aside 必须与所在上下文有关联——比如在一篇技术文章旁放“相关概念说明”，是合适的；但整页右侧固定广告栏若与当前内容无关，更适合用 div + role="complementary" 明确意图。
• 两者都不应作为布局容器使用：不要用 nav 包裹整个顶部通栏，也不要拿 aside 当右栏通用盒子。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！