html5语义架构要求标签各司其职：main唯一且平级于header/footer；nav仅包裹导航链接；header/footer可多级复用并需含标题；section表主题分组，article表独立内容单元。
HTML5语义架构不是“加点标签就完事”，而是用一套有逻辑、有层级、有职责分工的结构标签，把页面变成机器可读、人可理解、维护可持续的系统。核心在于每个标签只干它该干的事，不越界、不重叠、不滥用。
main 必须唯一且独立
main 是页面内容的“心脏”——它代表用户真正要阅读或操作的核心部分。一个页面只能有一个 main，且不能嵌套在 header、footer、article、aside 或 nav 里。它应直接位于 body 下，与其他顶级区块（如 header、footer）平级。
- 错误写法：
<article><main>...</main></article>（main 被 article 包裹） - 正确写法：
<header>...</header><main>...</main><footer>...</footer> - 若页面含多个独立文章，应在 main 内用多个 article 并列，而非用多个 main
nav 只负责导航链接
nav 的语义非常明确：它只包裹具有跳转功能的链接集合。不是所有带文字的条目都算导航，也不是所有菜单都该用 nav。
- 主导航栏、面包屑、页内锚点列表，适合用 nav
- 登录按钮、搜索提交按钮、图标按钮（无 href 或未指向有效 URL），不属于导航，应避免套 nav
- nav 可出现在 header 内（如顶部菜单），也可独立存在（如侧边导航），但不应放在 footer 中作为主要导航使用
header 和 footer 支持多级复用
header 和 footer 不是“只能用一次”的全局容器。它们可在不同语义层级重复出现，只要内容主题匹配其父级上下文。
- 页面级 header：含网站 logo、主 nav、搜索框
- 文章级 header：放在 article 内，含 h1 标题、作者、发布时间（配合 time 标签）
- 同理，footer 可用于整个页面底部，也可用于单个 section 的结尾（如某章节的参考资料说明）
- 注意：每个 header 应至少包含一个标题级元素（h1–h6）或明确标识主题的内容，否则语义空洞，建议改用 div
section 和 article 要区分“主题分组”与“独立单元”
section 是主题相关的分组容器；article 是能独立存在、可被转载或聚合的内容块（如一篇博文、一条新闻、一个产品卡片）。
- 博客首页中，每篇博文用 article 包裹，整组博文可用 section 命名为“最新文章”
- 长文内多个小节（如“安装步骤”“配置说明”“常见问题”）适合用 section，每个 section 应有 h2 或更高级别标题
- 避免把 section 当作样式布局盒子使用——没标题、没主题关联时，优先考虑 div
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
