该用 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></h2>～<h6></h6>。没有标题的 section 在读屏软件和搜索引擎眼里，跟 div 完全等价。
- 正确写法：
<section><h2>安装步骤</h2> <p>第一步：下载安装包...</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></section> - 错误写法：
<section><p>点击右上角设置按钮...</p></section>（无标题，语义断裂） - 嵌套时，每个
section都得有自己的标题，不能复用父级的<h2></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 失效的，是拼错标签名、漏掉 ，或者在 XHTML 模式下用自闭合写法。
- 错：
<article></article>、<article></article>、没声明 DOCTYPE → 浏览器当未知元素处理，无障碍支持归零 - 对：
<article></article>+，哪怕只支持现代浏览器，语义也成立 - 真要兼容 IE8，优先考虑
<div class="article"> + CSS 重置，比用 <code>document.createElementpolyfill 更可控最常被忽略的一点：语义标签不是装饰，是契约。一旦用了
article，就得配<header></header>、<h1></h1>、<time></time>；用了section，就得确保它真有主题、且有对应标题——否则不如老实用div。
