该用 article 还是 section 的核心判断标准是：内容单独复制到新 HTML 文件中能否被完整理解；能则用 article，不能则用 section（或 nav/aside/footer）；且每个 section 必须含 h2–h6 标题，否则语义失效。
用错 section 和 article 不会报错，但会让屏幕阅读器跳过关键内容、RSS 抓不到正文、SEO 权重被稀释——问题不在浏览器渲染，而在语义信号丢失。
怎么判断该用 article 还是 section
核心就一条：把这块内容单独复制出来，粘贴到新 HTML 文件里，还能不能被完整理解？能 → article；不能 → section（或更精确的 nav/aside/footer）。
- 博客全文、新闻条目、用户评论（每一条）、论坛回帖 → 必须用
article，它们自带作者、时间、标题等元数据，可被 RSS 单独抓取 - 博客正文里的「背景」「实验步骤」「结论」→ 用
section，抽出来就缺上下文，没人知道这是哪篇论文的哪一节 - 电商页的「规格参数」「用户评价」「售后政策」→ 各自独立用
section，三者共属“商品详情”这个大主题，但彼此不独立 - 首页轮播图、导航栏、页脚 → 别硬套
section，该用nav、header、footer就用，否则语义反而模糊
section 没标题就等于白写
section 的语义不是靠标签名撑起来的，而是靠内部是否包含 <h2>～<h6>。没有标题的 section 在读屏软件和搜索引擎眼里，跟 div 完全等价。
- 正确写法：
<section><h2>安装步骤</h2><p>第一步：下载安装包...</p></section> - 错误写法：
<section><p>点击右上角设置按钮...</p></section>（无标题，语义断裂） - 嵌套时，每个
section都得有自己的标题，不能复用父级的<h2>
article 嵌套 section 合理，反过来就不行
article 是内容实体，section 是它的逻辑子分组；但一个 section 下堆多个 article，说明你真正需要的是外层容器 main 或 div，而不是 section。
立即学习“前端免费学习笔记（深入）”；
- 合理：
<article><header><h1>如何调试 WebAssembly</h1></header><section><h2>环境准备</h2>...</section><section><h2>常见错误</h2>...</section></article> - 不合理：
<section><article><h2>快讯一</h2></article><article><h2>快讯二</h2></article></section>（这不是主题分组，是内容列表，外层该用main或带 ARIA role 的容器） -
article内部可以再嵌article，比如主报道中引用的专家评论，但前提是那条评论本身也具备独立分发价值
IE8 兼容不是借口，拼写和 DOCTYPE 才是硬门槛
别拿 IE8 说事——真正让 article 和 section 失效的，是拼错标签名、漏掉 <!DOCTYPE html>，或者在 XHTML 模式下用自闭合写法。
- 错：
<Article>、<article/>、没声明 DOCTYPE → 浏览器当未知元素处理，无障碍支持归零 - 对：
<article>+<!DOCTYPE html>，哪怕只支持现代浏览器，语义也成立 - 真要兼容 IE8，优先考虑
<div class="article">+ CSS 重置，比用document.createElementpolyfill 更可控
最常被忽略的一点：语义标签不是装饰，是契约。一旦用了 article，就得配 <header>、<h1>、<time>；用了 section，就得确保它真有主题、且有对应标题——否则不如老实用 div。
