article是唯一推荐用于包裹独立文章的语义化标签，因其明确表达“可独立存在、可分发、可重用”的语义，而section仅表主题分组、div无任何语义；article必须含h1标题及header中带datetime的time等元信息，否则语义失效。
article 是唯一推荐用于包裹独立文章的语义化标签。
为什么必须用 article，而不是 section 或 div
article 的核心语义是「可独立存在、可分发、可重用」——它告诉浏览器、搜索引擎和读屏器：这段内容哪怕被单独抓取、RSS 推送或嵌入其他页面，依然保持完整意义。而 section 只表示「文档中一个有主题的区块」，不承诺独立性；div 则完全无语义，纯为样式或脚本服务。
常见误用现象：
- 用
section包裹整篇博客正文 → 搜索引擎可能忽略其主体地位，RSS 解析器无法识别为可订阅单元 - CMS 输出强制套
div class="post"→ 机器不可读，无障碍工具无法定位主内容 - 嵌套多个
article但未体现隶属关系（如评论）→ 应确保内层article在外层语义上下文中合理存在，例如用户评论作为文章的附属内容
article 内部必须包含哪些语义化子标签
仅用 article 开闭标签远远不够。关键子结构需显式表达语义：
立即学习“前端免费学习笔记（深入）”；
- 标题必须是
h1，哪怕页面已有全局h1（如网站 Logo）——因为article创建了新的大纲上下文 - 元信息（作者、时间、分类）应放在
article内的header中，用dl/dt/dd组织，而非拼接文本 -
time元素必须带datetime属性，格式为YYYY-MM-DD或完整 ISO 8601（如2024-03-15T14:30:00+08:00），否则对机器不可读 - 评论区不能放进
article——它是用户生成内容（UGC），与原文不构成同一语义单元，应改用section并设aria-labelledby
兼容性与实际部署要注意什么
现代浏览器对 article 支持完善，但老旧环境（如 IE8 及更早）不识别该标签，会导致样式丢失或结构塌陷：
- 必须引入
html5shiv脚本（仅需在<head>中加载一次），否则 IE9 以下无法正确渲染语义结构 - CSS 重置时，注意
article默认无 margin/padding，不要依赖浏览器默认值做布局 - 若使用 SSR 框架（如 Next.js、Nuxt），确保服务端输出的 HTML 已含完整语义结构，避免 hydration 后才补
article标签（会触发 DOM 重排且语义滞后）
最容易被忽略的一点：语义不是“加了就算完成”，而是要贯穿整个内容生命周期——从 CMS 字段映射、模板渲染，到 RSS 输出、结构化数据（Schema.org）注入，都得保持 article 的边界清晰。一旦把评论、相关推荐、广告塞进同一个 article，语义就失效了。
