article 必须能独立存在，否则就是误用；判断标准是单独复制到新页面或 rss 阅读器能否被完整理解，需满足正确拼写、doctype 声明，且不可替代为 div 或 section。
article 必须能独立存在，否则就是误用
判断一个区块该不该用 article，核心就一条：把它单独复制出来，贴到新页面或 RSS 阅读器里，是否还能被完整理解？如果需要上下文才能看懂，那它就不配叫 article。
常见误用场景包括：整页主内容区（该用 main）、文章摘要列表（该用 section + 多个 article）、带标题的广告位（语义不符，该用 aside 或 section）。
- ✅ 正确：单篇博客全文、新闻条目、论坛发帖、用户评论（每条评论本身可被转发/引用）
- ❌ 错误：把整个“关于我们”页面包进一个
article；把导航栏或页脚塞进article - ⚠️ 注意：
article可嵌套另一个article，但必须是逻辑上的“整体-部分”关系，比如一篇报道中引用的专家评论，本身也具备独立分发价值
section 必须带标题，否则语义失效
section 不是视觉分隔工具，它的语义依赖于内部是否包含 h1–h6。没有标题的 section 在读屏软件和搜索引擎眼里，跟 div 完全等价——只是多写了一个标签，还误导维护者。
标题不一定要紧贴开头，但必须在同一个 section 元素内；嵌套的 section 也得有自己的标题，不能共用父级标题。
- ✅ 正确：产品介绍区开头是
<h2>我们的服务</h2>，外层包section - ❌ 错误：仅为了加 margin 或背景色套
section，里面只有p和button - ⚠️ 注意：同一页面中，
section可以包含多个article（如新闻列表页），但不要在article内部用section划分章节——除非该章节足够长、有明确子主题且需被辅助技术识别为可跳转节点
拼写与 DOCTYPE 是硬门槛，错一个就归零
article 标签不是可选功能，它依赖两个基础条件：标准拼写 + 正确文档类型声明。写成 <_article></_article>、<article></article> 或漏掉 ，浏览器会当它是未知元素处理——无语义、无默认样式、无障碍支持直接丢失。
IE8 及更早版本原生不识别 article，若真要兼容，得用 document.createElement('article') 注册，再配合 CSS 重置。但实际项目中，优先降级为 <div class="article"> 更干净。
<ul>
<li>✅ 必做：<code> 开头，全部小写，无下划线，无命名空间前缀
document.querySelector('article') 返回 null；屏幕阅读器跳过该区域；SEO 工具无法提取结构化数据别拿 div 当替罪羊，三者分工根本不同
div 的官方定义就是 “no special meaning at all”。它不是过时的旧标签，而是定位清晰的纯容器：你需要加 class 写 CSS、绑 id 调 JS、或者只是视觉归组——它就是最干净的选择。把它和 article、section 拉来对比，本身就是误解了设计意图。
滥用语义标签的代价很实在：读屏软件会把没标题的 section 当透明，把套错的 article 当噪音过滤；搜索引擎可能误判主次内容，导致关键信息不被索引。
- ✅
div合适场景：模态框外层<div id="modal-overlay">、Grid 布局项、侧边栏容器 <code><div class="sidebar"> <li>❌ <code>div不适合：整篇博客正文（该用article）、参数与评价区域（该用section） - ⚠️ 最容易被忽略的一点：语义标签影响的是辅助技术的导航逻辑，不是页面渲染效果。你改了标签但没配标题、没理清嵌套关系，等于只改了表皮，结构还是碎的
