article标签必须包裹可独立存在的内容，含标题及元数据；判断标准是复制html到新文件能否被用户理解；嵌套需符合真实包含关系，无标题或不可单飞则语义失效。

用 article 标签包裹文章主体，不是加个标签就完事——它必须包含标题、能脱离页面独立存在，否则语义失效，SEO 和读屏支持都会打折。

怎么判断该不该用 article

核心就看内容能不能「单飞」：复制整段 HTML 到新文件里打开，用户是否仍能理解这是什么、谁写的、什么时候发的？

• 博客正文（含 header 里的标题 + 作者 + 时间，以及 footer 的标签或编辑链接）→ 符合，必须用
• 新闻列表页中每条卡片（标题+摘要+来源+发布时间）→ 每条都该套一个 article
• 用户评论区里的每条评论（带昵称、时间、内容）→ 独立可引用，每条都是 article
• 首页“推荐文章”模块外层容器 → 不符合，那是组织逻辑，该用 section；里面每篇才用 article
• 侧边栏“相关链接”或页脚版权 → 用 aside 或 footer，别硬套 article

article 里必须有标题，且不能裸奔

没有 h1–h6 的 article 是语义残缺的。读屏软件可能跳过，搜索引擎也可能降权。

• 标题建议放在 header 内部，比如：<header><h2>如何正确使用 article 标签</h2> <p>作者:张三 发布时间:2026-04-15</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a> <p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p> </div> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></header>
• 不要只写 <h2>标题</h2> 就完事——缺少上下文元数据会削弱“可独立性”
• 标题层级按内容本身定：主文章可用 h1，评论列表里的每条评论用 h2，评论下的回复用 h3，不强制统一为 h1
• 千万别用 <div class="title"> 模拟标题，屏幕阅读器无法识别其语义 <h3> <code>article 嵌套的合理与错误场景

  可以嵌套，但必须反映真实的内容包含关系，不是为了结构好看就层层套。

  • ✅ 合理嵌套：一篇技术教程（外层 article）里，每个“实战步骤”也用 article 包裹——前提是该步骤自带标题、作者、时间，能被单独引用或 RSS 抓取
  • ✅ 合理嵌套：博客正文（外层）下嵌套读者评论（每个评论是独立 article），因为评论本身可转发、可订阅
  • ❌ 错误嵌套：把“引言”“方法”“结论”这些子段落各自套 article → 它们不能脱离原文独立存在，该用 section
  • ❌ 错误嵌套：在 article 里再包一层广告位或推荐栏 → 那些不属于该文章的独立内容，应放在外部

  兼容性与样式要自己补，浏览器不给默认值

  article 在 IE8 及更早版本里不被识别，但不会崩——它会被当普通 div 渲染，只是丢失语义。现代浏览器（Chrome/Firefox/Safari/Edge）原生支持。

  • 若需兼容 IE9，可在 加 document.createElement('article')，或引入 html5shiv.js
  • article 没有默认 margin/padding/border，想视觉上突出？得自己写 CSS，例如：

    article { border-left: 3px solid #007acc; padding: 1rem; margin-bottom: 1.5rem; }

  • 别指望加了 article 就自动适配无障碍导航——只有配合正确的标题层级和 header/footer 结构，读屏软件才能准确播报“这是一篇独立文章”

  最容易被忽略的一点：很多人把 article 当成“高级 div”，只图结构好看。其实它的价值全在外部——SEO 爬虫靠它区分正文与边栏，读屏用户靠它跳转核心内容，RSS 工具靠它提取条目。没标题、没元数据、不能单飞的内容，套了也没用。