HTML5语义标签需精准使用：header与nav职责分离，main唯一且仅含核心内容，article用于可独立传播的内容，section用于逻辑分组并须带标题，aside承载间接相关信息，footer明确标识结尾归属。
HTML5文档骨架不是套个标签就完事，关键在于用对地方、用得准确。语义标签的核心价值是让结构本身说话——开发者一眼看懂布局，搜索引擎准确识别主次，屏幕阅读器能顺畅导航。
header 与 nav 要分开，别堆在一起
很多人把整个顶部栏（Logo + 搜索框 + 用户头像 + 导航菜单）全塞进一个 header 里，这是常见误区。header 是“头部容器”，负责包裹介绍性内容；nav 是“导航集合”，专管跳转链接。两者职责不同，可以嵌套，但不能混同。
- 如果顶部有导航菜单，它应该被 nav 明确包裹，哪怕这个 nav 就在 header 内部
- header 可以没有 nav（比如纯标题+副标题的章节头）
- nav 也可以不在 header 里（比如页脚的分类导航、文章末尾的“相关链接”）
- 多个 nav 共存时，建议用 aria-label 区分用途，例如 aria-label="主导航" 和 aria-label="页内目录"
main 必须唯一，且只装真正核心的内容
main 是页面的“心脏”，代表用户最该关注的部分。它不是“除了 header 和 footer 之外的所有东西”，而是严格限定的主体区域。
- 整个 HTML 文档中只能出现一次 main，重复使用会破坏文档大纲
- 它不能包含重复出现的通用元素：比如不要把网站 Logo、全局导航、页脚链接放进 main
- main 的直接子元素应是内容块，如 article、section 或段落，而不是一堆无结构的 div
- 它不能作为 header、footer、aside 或另一个 section 的子元素
article 和 section 别乱换，看内容是否“可独立”
这是新手最容易卡壳的地方。判断标准很实在：把这块内容单独复制出来，贴到 RSS 阅读器、邮件推送或另一个网站上，它还能不能自己讲清楚一件事？
立即学习“前端免费学习笔记（深入）”；
- 能——就是 article：一篇博客、一条新闻、一个用户评论、一份产品说明书
- 不能，只是为组织逻辑而分组——就是 section：比如“关于我们”板块、“服务流程”章节、“客户评价汇总”
- section 必须带标题（h1–h6），否则语义失效；没标题就该用 div
- article 内部可以嵌套 section（比如文章里的小节），但 section 里不该硬塞一个不相关的 article
aside 和 footer 各司其职，别当万能边角料
aside 不是“侧边栏专用”，而是指“与当前内容间接相关”的信息；footer 也不是“页面底部所有东西”，而是明确的结尾归属。
- aside 适合放：当前文章的术语解释、作者简介、相关推荐、引用来源、广告位（前提是和当前内容有关联）
- footer 应出现在 body 最外层，或嵌套在 article / section 内部作为区块尾部，内容聚焦版权、备案号、联系方式、辅助链接
- 页脚里一堆杂项链接（如“隐私政策”“用户协议”“招聘”）通常不需要 nav，除非它们构成站点级主要导航路径
- 避免把整页的“友情链接”或“合作伙伴”列表塞进 aside——那更接近通用内容，用 section 更合适
