本文深入解析了HTML中`

`与`

`标签的核心语义差异与正确使用原则：关键在于判断内容是否具备独立传播价值——能单独复制到新页面仍可被完整理解的（如博客文章、新闻条目、用户评论）必须用`

`；而仅在上下文中才有意义的逻辑分组（如“实验步骤”“规格参数”）则应使用`

`，且每个`

`必须包含`

`–`

`标题，否则语义失效、无障碍支持归零、SEO与RSS抓取严重受损；文章还强调语义标签不是视觉装饰而是开发契约，用错不报错却会 silently 破坏可访问性与内容结构，真正阻碍语义生效的从来不是老旧浏览器，而是拼写错误、缺失DOCTYPE或对语义责任的忽视。

用错 section 和 article 不会报错，但会让屏幕阅读器跳过关键内容、RSS 抓不到正文、SEO 权重被稀释——问题不在浏览器渲染，而在语义信号丢失。

怎么判断该用 article 还是 section

核心就一条：把这块内容单独复制出来，粘贴到新 HTML 文件里，还能不能被完整理解？能 → article；不能 → section（或更精确的 nav/aside/footer）。

• 博客全文、新闻条目、用户评论（每一条）、论坛回帖 → 必须用 article，它们自带作者、时间、标题等元数据，可被 RSS 单独抓取
• 博客正文里的「背景」「实验步骤」「结论」→ 用 section，抽出来就缺上下文，没人知道这是哪篇论文的哪一节
• 电商页的「规格参数」「用户评价」「售后政策」→ 各自独立用 section，三者共属“商品详情”这个大主题，但彼此不独立
• 首页轮播图、导航栏、页脚 → 别硬套 section，该用 nav、header、footer 就用，否则语义反而模糊

section 没标题就等于白写

section 的语义不是靠标签名撑起来的，而是靠内部是否包含

～

。没有标题的 section 在读屏软件和搜索引擎眼里，跟 div 完全等价。

• 正确写法：

  安装步骤

  第一步：下载安装包...

• 错误写法：

  点击右上角设置按钮...

  （无标题，语义断裂）
• 嵌套时，每个 section 都得有自己的标题，不能复用父级的

article 嵌套 section 合理，反过来就不行

article 是内容实体，section 是它的逻辑子分组；但一个 section 下堆多个 article，说明你真正需要的是外层容器 main 或 div，而不是 section。

• 合理：

  如何调试 WebAssembly

  环境准备

  ...

  常见错误

  ...
• 不合理：

  快讯一

  快讯二

  （这不是主题分组，是内容列表，外层该用 main 或带 ARIA role 的容器）
• article 内部可以再嵌 article，比如主报道中引用的专家评论，但前提是那条评论本身也具备独立分发价值

IE8 兼容不是借口，拼写和 DOCTYPE 才是硬门槛

别拿 IE8 说事——真正让 article 和 section 失效的，是拼错标签名、漏掉 ，或者在 XHTML 模式下用自闭合写法。

• 错：
  、

  、没声明 DOCTYPE → 浏览器当未知元素处理，无障碍支持归零
• 对：
  + ，哪怕只支持现代浏览器，语义也成立
• 真要兼容 IE8，优先考虑
  + CSS 重置，比用 document.createElement polyfill 更可控

最常被忽略的一点：语义标签不是装饰，是契约。一旦用了 article，就得配