article仅用于包裹可独立存在、可被rss抓取或单独分享的内容单元，误用会导致语义污染、seo降权、无障碍访问失败。

直接说结论：article 不是用来“包住文章内容”就完事的，它只该包裹**能脱离当前页面独立存在、可被 RSS 抓取、可被单独链接分享**的内容单元。用错不是样式问题，而是语义污染——搜索引擎降权、读屏软件跳过、无障碍测试报错都会跟着来。

怎么判断一段内容配不配用 article

别看它长得像“文章容器”，核心就一条：把这段 HTML 复制出来，粘贴到一个空白 HTML 文件里打开，用户是否仍能看懂这是什么、谁写的、什么时候发的？

• 博客正文（含标题、作者、发布时间、正文段落）→ ✅ 必须用 article
• 新闻列表页中每条新闻卡片（标题+摘要+来源+时间）→ ✅ 每条都套一个 article
• 用户评论区里的单条评论（昵称、头像占位、时间、内容）→ ✅ 可以用 article，尤其当它支持独立回复或转发时
• 首页“推荐文章”模块外层容器 → ❌ 该用 section；里面每篇推荐才各自用 article
• 侧边栏“相关链接”或页脚版权信息 → ❌ 用 aside 或 footer，硬套 article 是语义错误

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

没有 <h1></h1>–<h6></h6> 的 article 是无效语义结构。W3C 验证器会报 article element without heading，读屏软件可能完全忽略它。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 标题应放在 <header></header> 内部更规范，比如：<header><h2>CSS 变量在暗色模式中的实际陷阱</h2> <p>作者：李四｜更新于 2026-05-08</p></header>
• 不要复用父级页面的标题，例如整站 <h1>我的技术博客</h1> 不能塞进每篇 article 里
• 嵌套时注意层级：父 article 用 <h2></h2>，子 article（如引用的专家评论）就该用 <h3></h3>，否则屏幕阅读器无法正确导航

嵌套和兼容性要注意什么

article 允许嵌套，但逻辑上必须是“独立内容套另一个独立内容”，不是“为了分段而分段”。

• ✅ 合理嵌套：一篇报道里引用的某篇独立社评（自带标题+作者+时间）
• ❌ 错误嵌套：把主文章拆成“第一部分”“第二部分”，每部分都用 article —— 这该用 section
• IE8 及更早版本不识别 article，但不会崩；若真要兼容，得在 加 document.createElement('article')，不过现在绝大多数项目可直接忽略
• article 没有默认样式，想加边框/内边距？必须自己写 CSS，比如：article { border-left: 3px solid #007acc; padding: 1rem; margin-bottom: 1.5rem; }

最容易被忽略的一点：很多人把 article 当成“带语义的 div”，只图结构好看。但它一旦误用，就不是少个 class 的事——SEO 结构化数据提取失败、读屏软件播报混乱、验证器持续报错，都是立刻可见的后果。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！