用好 header、section 和 nav 的关键是理清“谁在引导、谁在导航、谁在分块”三层逻辑：header 作为内容区块的语义头部须含标题；nav 专用于跳转链接集合，需明确导航意图；section 按主题划分内容，必须有且仅有一个标题支撑语义。
用好 header、section 和 nav，不是堆砌标签，而是理清“谁在引导、谁在导航、谁在分块”这三层逻辑。它们各自有不可替代的语义角色，配合得当，页面结构就自然清晰、机器可读、维护省力。
header：不止是“顶部横条”，是内容区块的介绍入口
header 的本质是“某段内容的头部介绍”，不绑定页面顶部位置。它可以出现在整个页面最外层，也可以嵌套在 article 或 section 里面，为那个局部内容定调。
- 顶层 header 通常含网站 Logo、主标题、副标语，甚至搜索框
- 一篇博客文章内部的 header 可以放文章标题、作者、发布时间、分类标签
- 每个 header 应该包含至少一个 h1–h6 标题（或 hgroup），否则语义就空了
- 避免把纯装饰性元素（比如分隔线、图标）塞进 header 当作“头部”——没内容支撑的 header 是无效语义
nav：专管“去哪”，不包“是什么”
nav 的核心是“导航功能”。它只该包裹那些真正用于跳转、切换上下文的链接集合，比如主导航菜单、文章目录、分页按钮。
- 页脚里几个散落的“关于我们”“隐私政策”链接，不需要放进 nav
- 一个页面可以有多个 nav，比如顶部主导航 + 文章内目录 + 评论区分页导航
- 推荐加 aria-label（如
aria-label="主导航"），方便屏幕阅读器识别用途 - 别用 nav 包按钮、图片、文字说明——这些不是导航，用 div 或其他语义标签更合适
section：按主题切分内容，但必须“有名有姓”
section 表示一组有共同主题的内容，它不是样式容器，也不是万能分块工具。关键判断标准只有一个：这块内容能不能用一个标题准确概括？
立即学习“前端免费学习笔记（深入）”；
- 每组 section 内部应有且仅有一个 h2–h6 标题（不能只有 div 或 p）
- 常见场景：博客正文里的“背景”“方法”“结论”三块；产品页的“功能亮点”“用户评价”“技术参数”
- 如果只是为设背景色、加边框而分块，用 div 更合理；section 要承担语义责任
- 多个 section 可以并列放在 main 下，也可嵌套在 article 中表达文章内部结构
这三个标签真正的“组合拳”，体现在层级协作上：顶层 header 定义站点身份，紧随其后的 nav 告诉用户“可去哪”，再往下 main 搭配若干 section 或 article 把核心内容讲清楚。结构对了，样式和交互才容易落地，无障碍和 SEO 也自然受益。
