... 看似能控制样式，但对结构毫无意义。浏览器不认 class="header" 是页眉，SEO 工具不会因此提升标题权重，视障用户用读屏软件 tab 切换时，也得不到“这是导航区”的提示。

语义标签的作用是声明“这是什么”，不是“这长什么样”。以下情况必须警惕：

• 一个页面出现两个
  —— 浏览器会忽略第二个，辅助技术可能跳过主体内容
• 把
  当作顶部装饰盒，里面塞按钮、广告、登录框 —— 它只该放本页或本节的标题、logo、简短导语
• 用
  包裹没有标题（h1–h6）的内容 —— 语义断裂，它本质是“有主题的独立章节”

必须唯一，且不能嵌套在

或

外部

表示整页最核心、不可替代的内容，比如博客正文、商品详情、表单主操作区。它的约束非常刚性：

• 整个 HTML 文档中只能有一个
• 不能出现在
  、、 内部
• 可以包含
  或
  ，但反过来不行：不能把
  放进
  里
• 若页面是仪表盘，
  应包裹所有数据卡片容器，而不是每个卡片都套一个

和 的使用边界在哪

不等于“所有带链接的地方”。它专指**主导航路径**：全站菜单、面包屑、翻页控件、跳转到锚点的目录。常见误用：

• 把页脚里的“隐私政策”“联系我们”链接放进 —— 它们属于辅助信息，用普通 p 或 ul 即可
• 在文章末尾加“相关阅读”链接列表，却用了 —— 更合适的是 ，因为它是对当前内容的补充，非全局导航

也不是“右边那栏”。它表示与当前内容**有关联但可独立存在**的信息，例如：

• 博客正文旁的作者简介（含头像、社交链接）
• 新闻页右侧的背景资料卡片
• 内部的引用说明或术语注释

如果右侧栏是全站统一的广告位或客服入口，它其实属于布局容器，应放在 级别的

，而非嵌套在

里。

嵌套顺序和可访问性影响

语义标签的嵌套不是自由发挥。错误嵌套会让读屏软件跳过关键内容，或打乱阅读流。典型合规结构是：

  
...
  
  

    

      
标题
      
正文
      
    
  
  
  

注意：

可以出现多次（页面级 + 文章级），但每个

必须紧贴其所属区块的开头； 同理，可属于 或某个

，但不能悬空在

外又不属于任何父容器。

最容易被忽略的一点：语义结构一旦写错，CSS 再漂亮也救不回可访问性缺陷。检查时别只看渲染效果，用浏览器开发者工具的“Accessibility”面板或 Lighthouse 报告，直接看它是否识别出了正确的地标（landmark）区域。

本篇关于《HTML结构标签如何划分页面功能区域》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！