HTML语义化标签是现代网页可访问性、SEO和可维护性的基础设施，而非装饰；滥用div+class会丢失语义，导致辅助技术失效、SEO权重稀释及协作成本上升。

HTML语义化标签不是“锦上添花”的装饰，而是现代网页能被正确理解、可靠运行、长期维护的基础设施。不用

、

或

，浏览器和屏幕阅读器仍能渲染页面，但它们会失去对“这是导航”“这是主内容”“这是独立文章区块”的明确判断——这直接导致可访问性断裂、SEO权重稀释、团队协作成本上升。

为什么

不能替代

和

用

模拟页眉，视觉上没问题，但语义信息彻底丢失。浏览器不会把它当作页面头部区域处理；屏幕阅读器无法通过快捷键（如 H 键跳转页眉）定位；搜索引擎也不会因此提升该区域内容的结构权重。

• 可以嵌套在
  内部，表示该文章自己的标题区；而全局
  表示整个页面的头部
• 同样支持多级使用：页面级
  放版权，
  内的
  可放作者、发布时间等元信息
• 滥用
  + class 的写法，在大型项目中会导致 CSS 类名爆炸（.site-header、.article-header、.section-header），而原生语义标签天然自带作用域

  必须且只能出现一次，但很多人忽略了它的嵌套限制

  是页面中唯一代表“主导航之外的核心内容”的容器。它不能出现在

  、

  、

  、

  、

  内部——这些元素本身已有明确语义，再包一层

  属于语义冲突。

  • 错误写法：

    内容

    

    HTML Text Extract

    从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

    下载
  • 正确写法：

    标题

    内容

    ，由
    自身表达“独立内容区块”语义
  • 若页面有多个主要区块（比如双栏新闻+侧边推荐），应只用一个
    包裹全部，再用
    划分逻辑区域

  不等于“所有链接集合”，它特指主导航用途

  把面包屑、页脚链接、相关文章推荐都塞进

  是常见误用。W3C 明确指出：

  应用于“页面主要导航区块”，即用户用来在网站不同区域间切换的入口集合。

  • 页脚中的“关于我们｜联系方式｜隐私政策”属于次要导航，建议用
    直接包裹，不加
  • 文章末尾的“上一篇｜下一篇”属于上下文导航，更适合用
    或普通
    ，避免误导辅助技术
  • 如果页面有多个主导航（如顶部主导航 + 侧边管理导航），可以使用多个
    ，但需通过 aria-label 区分，例如
    和

  真正难的不是记住每个标签怎么写，而是持续判断“这个内容在用户心智模型和机器解析模型中，究竟扮演什么角色”。语义化不是贴标签，是做翻译——把人的意图，准确转译成浏览器、爬虫、屏幕阅读器都能无歧义接收的信号。一旦开始依赖 class 名来“模拟语义”，就等于主动放弃了 HTML 的底层契约能力。