博客正文必须用article包裹，因其专表可独立存在、RSS抓取、转发引用的内容；仅用section或div则语义缺失，导致SEO降权与无障碍访问失败。
博客正文必须用 article 包裹，不能只用 section 或 div
浏览器和搜索引擎靠 article 判断“这是一篇能单独存在、被 RSS 抓取、可转发引用的内容”。如果只用 section，语义上它只是“页面里一块区域”；用 div 则完全无信号。真实场景中，SEO 工具和 Chrome 的 Accessibility 面板都会把没包进 article 的博客正文识别为普通段落，不计入“独立内容”索引。
- 首页的「最新三篇文章」列表 → 每一项都该是独立的
article，不是外层套一个section再里面放三个div - 产品页的「用户评价」模块 → 整个容器用
section，每条评论各自用article - 把整篇博客塞进
main但不加article→ 等于放弃语义优势，读屏软件可能跳过标题或误判结构
article 里必须有 h1–h6，且建议用 header 包一层
没有标题的 article 是语义残缺的。W3C 明确建议每个 article 应含且仅含一个标题级元素，否则无障碍测试报 warning，部分 SEO 工具会降权。标题不必非得是 h1——在嵌套或列表页中，用 h2 更符合大纲层级，但不能用 div class="title" 替代。
- 正确写法：
如何正确使用 article 标签
作者：张三
- 错误写法：
- 更隐蔽的错：
标题
article里，没包header—— 虽不报错，但缺少元数据上下文，削弱“可独立性”
嵌套 article 可以，但必须满足“单飞”条件，且层级别超两层
嵌套本身合法，比如主文章里引用一篇旧文，或评论区每条评论都是完整表达。但嵌套不是为了结构好看，而是因为子内容本身也满足“三可”：可独立理解、可单独引用、可被 RSS 抓取。超过两层（如 article → article → article）会让 Google Search Console 无法提取发布时间或作者字段，旧版读屏器也可能播报混乱。
- 推荐嵌套：
article（主博客）→article（某条评论，带昵称+时间+正文） - 不推荐嵌套：
article（主博客）→article（“第一部分”“第二部分”这种无作者无时间的分段）→ 应改用section - 绝对禁止：
article里再包一个main——main是页面级容器，不能作为article的子元素
兼容性与样式要自己兜底，别指望浏览器自动处理
article 在 IE8 及更早版本不被识别，但不会崩——它会被当 div 渲染，只是丢失语义。现代浏览器原生支持，无需 polyfill。但它没有默认 margin/padding/border，视觉上不突出，需要手动加 CSS。
- 基础样式建议：
article { border-left: 3px solid #007acc; padding: 1rem; margin-bottom: 1.5rem; } - IE9 兼容方案：在
加document.createElement('article')，或引入 html5shiv.js - 别依赖
article自动适配无障碍导航——只有配合正确的标题层级、header/footer结构，读屏软件才能准确播报“这是一篇独立文章”
真正难的不是写出合法的 HTML，而是每次加 article 前都得问一句：这段内容，剪下来发到另一个网站，别人能看懂吗？
