语义是内容在文档中的角色声明，非样式表现；表示全页唯一主内容区，是屏幕阅读器可跳转的导航地标，/可嵌套于等区块中表其头部/尾部。

HTML语义化标签不是“换掉

就行”，而是用标签准确表达内容在文档中的角色和关系——比如

表示唯一主内容区，

不只是“放链接的盒子”，而是被屏幕阅读器识别为可跳转的导航地标。

什么是“语义”？不是样式，是角色声明

语义不是指“看起来像什么”，而是“它在页面中承担什么功能”。

不等于“顶部有 logo 的 div”，它代表一个区块的头部（可以嵌套在

里）；

同理，不单指页面底部，也可能是某篇

的作者信息区。

常见错误现象：

• 把整个页面用
  包裹，却没用

  —— 机器无法识别其结构性意图
• 多个
  出现在同一页面 —— 违反 HTML 规范，部分辅助技术会忽略后续的
• 用
  包裹按钮或链接，只因“它在段落位置” ——
  表示独立段落文本，不是布局容器

、

、

怎么选？看内容独立性与层级

三者都描述内容区块，但语义强度和嵌套逻辑不同：

• ：全页面**唯一**，包裹所有核心内容（不含导航、侧边栏、页脚等），搜索引擎和读屏器靠它快速定位主体
• ：内容**可独立分发/复用**，如博客文章、新闻条目、用户评论。可嵌套在
  或
  中
• ：仅表示**逻辑分组**，无独立语义权重。例如“产品介绍”“用户评价”两个区块，用
  划分比用
  更明确，但不能替代

  性能影响小，但 SEO 和可访问性影响直接：Google 明确将

  作为内容可信度信号之一；NVDA 等读屏器支持 main landmark 快速跳转。

  

  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

  下载

  为什么

  不能随便套？它自带交互契约

  不是“有链接的地方就加”，它意味着该区域提供**全局或主要导航路径**。浏览器扩展、读屏器会将其识别为“导航地标”，用户可通过快捷键（如 NVDA + Insert + N）直接跳入。

  使用场景判断：

  • ✅ 主导航菜单、面包屑、页内锚点目录
  • ❌ 分页按钮（用
    更合适）、文章内超链接、侧边“相关推荐”链接列表（属于

    ）

    容易踩的坑：在每个卡片组件里都包一层

    ，结果页面出现十几个导航地标，反而干扰用户定位。

    兼容性不是借口，但得知道底线在哪

    IE9 及更早版本不原生支持语义化标签，但现代项目基本无需考虑。真正需要注意的是：

    • CSS 重置：老浏览器对
      等默认显示为 display: block，但若用了 Normalize.css 或自定义 reset，需确认未意外设为 inline
    • ARIA 补充：当必须用
      时（如 SSR 框架限制），可用 role="main"、role="navigation" 等补语义，但优先级低于原生标签
    • 嵌套规则：不能把
      放进
      或
      —— W3C 明确禁止，部分解析器会静默降级

    最常被忽略的一点：

    和
    可以出现多次，但每个都必须服务于其父元素的内容结构；滥用它们堆砌语义，反而稀释了真正关键区域的信号强度。