HTML5核心语义标签nav、header、main、footer各司其职：nav仅用于主导航；header表示区块引导区且需含标题；main全页唯一、直属于body、只包核心内容；footer归属最近父区块，专用于结尾信息。

HTML5核心语义标签不是样式工具，而是结构语言——nav、header、main、footer各自承担不可替代的语义职责，用错位置会干扰屏幕阅读器、损害SEO、增加维护成本。关键不在“用了没”，而在“用得准不准”。

nav：只管主导航，不背其他链接的锅

专为页面中主要导航链接集合而设，比如顶部菜单栏、左侧栏目树、文章内目录。它不是“所有链接的收纳盒”。

• ✅ 正确用法：用
  包裹首页、产品、关于、联系等核心跳转项；可加aria-label="主导航"明确用途
• ❌ 常见误用：页脚友情链接、文章末的“上一篇/下一篇”、按钮式操作入口（如“立即下载”）都不该放进
• ⚠️ 注意：一个页面可有多个
  ，但需区分用途——例如

  里放主导航，

  里放当前文章的章节导航，两者都合法，但要用aria-label标注清楚

header：是“介绍区”，不是“顶部横条”

代表某内容区块的引导性区域，位置不固定，语义由上下文决定。它可以出现在页面顶层，也能嵌套在

或

里。

• ✅ 正确用法：整个页面的
  含Logo和主标题；每篇博客

  内部再套一个

  ，放该文标题+作者+发布时间
• ❌ 常见误用：把广告横幅、促销弹窗、无关按钮塞进
  ；单独使用

  却不包含

  –

  ，导致辅助技术无法识别其功能

• ⚠️ 注意：每个
  最好自带一个标题级元素，哪怕只是

  ，这是语义完整的关键信号

main：全页唯一，且只装“非它不可”的内容

是页面的语义心脏，必须唯一，且只能包裹真正核心、不可省略的信息。它不是布局容器，而是内容定位锚点。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

立即学习“前端免费学习笔记（深入）”；

• ✅ 正确用法：博客页中只包正文段落、配图、评论入口；电商页中只包商品主图、规格表、加入购物车按钮
• ❌ 常见误用：把顶部导航、侧边栏推荐、页脚版权、面包屑路径一起塞进
  ；或把它嵌套在

  、

  甚至

  里

  ⚠️ 注意：

  不能是任何其他语义标签的子元素——它必须直接位于下，且与

  、

  、

  平级

  footer：归属明确，不是“底部大杂烩”

  属于它最近的父级区块，可以多次出现。全局页脚和文章尾部页脚，语义完全不同。

  • ✅ 正确用法：级
    放网站版权、备案号、返回顶部；

    内部

    放作者信息、发布时间、标签分类
  • ❌ 常见误用：把主导航重复放在页脚当“快捷入口”；把全文链接列表、社交媒体图标堆进全局
    却不加语义说明
  • ⚠️ 注意：页脚内容若与主内容强相关（如“本节参考资料”），更适合用
    而非

    ；纯收尾信息才归

  这四个标签共同构成页面骨架，彼此不重叠、不嵌套、不越界。写的时候多问一句：“这段内容，对机器和人来说，到底在扮演什么角色？”——答案自然就落在

  、

  、

  或

  里了。