判断article还是section的核心标准是内容能否独立存在并被完整理解：能则用article，不能但有主题则用section，既不能独立又无主题则用div；section必须含h1–h6标题，否则语义等同div。
别用 article 包整页内容，也别给没标题的区块硬套 section —— 这俩标签不是样式开关，而是语义信号，错用反而让结构更混乱。
怎么判断该用 article 还是 section
核心就一条：把这块内容单独复制出来，贴到新 HTML 文件里打开，能不能被完整理解、有没有独立价值？
- 能 → 用
article（比如单篇博客正文、一条新闻、每条评论） - 不能，但它是页面里一个有主题的分块 → 用
section（比如“安装步骤”“API 列表”“用户反馈”） - 既不能独立存在，又没明确主题 → 直接用
div，别硬塞语义标签
常见反例：article 套整个“关于我们”页、section 里只有几个按钮和一段文字、用 section 单纯为了加 margin。
为什么 section 必须带 <h1>–<h6></h6>
</h1>
没有标题的 section 在语义上等于 div：读屏软件跳过它，SEO 工具不识别结构，DevTools 的 Accessibility 面板里也不会显示为可导航节点。
- 标题不必紧贴开头，但必须在同一个
section元素内 - 嵌套的
section不能共用父级标题，每个都得有自己的h2或h3 - 如果只是想视觉分组，用
div+ class 更诚实；真要语义分组，先补标题
错误写法：<section><p>这是服务介绍</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12110" title="响应式烟草公司HTML5网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/003/178608513864290.jpg" alt="响应式烟草公司HTML5网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12110" title="响应式烟草公司HTML5网站模板" class="overflowclass">响应式烟草公司HTML5网站模板</a>
<p class="overflowclass">响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12110" title="响应式烟草公司HTML5网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<button>立即咨询</button></section> —— 这段代码在无障碍树里根本不会被当作一个逻辑单元。
article 嵌套时容易踩的坑
可以嵌套 article，但必须满足“整体-部分”且“部分本身可独立分发”。不是所有子内容都配得上这个标签。
- ✅ 合理：一篇技术文章（外层
article）里引用的专家观点（内层article），自带作者、时间、可被单独 RSS 抓取 - ❌ 错误：博客正文（
article）里把“相关推荐”列表每条都包成article—— 它们只是链接，没正文、没作者、没独立 URL - ⚠️ 注意：嵌套层级深了，
header/footer容易混淆归属。内层article的header描述的是它自己，不是外层的
浏览器不渲染差异，但 Chrome DevTools 的 Accessibility 面板会清晰暴露嵌套是否合理 —— 打开看看，结构树是不是你预期的样子。
拼写、DOCTYPE 和兼容性底线
article 和 section 是 HTML5 标签，拼错或漏声明 DOCTYPE，语义直接归零。
- 必须小写、无下划线、无命名空间：
<article></article>✔️，<article></article>❌，<_article></_article>❌ - 必须有
开头，否则 IE9+ 以下、旧版 Safari 可能当未知元素处理 - IE8 及更早需
document.createElement('article')注册，但实际项目中建议降级为<div class="article">，更可控 <p>最常被忽略的一点：语义标签的价值不在视觉，而在结构树。检查是否生效，别只看页面长什么样，一定要打开 DevTools → Accessibility 面板确认节点类型和层级关系。</p> </div>
