应使用article标签包裹逻辑上独立、可单独引用或分发的内容单元，如博客正文、新闻稿、用户评论；它需具备标题、作者、时间等元信息，支持嵌套header/footer，不可用于纯布局容器。
article 标签用于包裹一篇**完整、独立、可被单独分发或复用的内容单元**，比如博客文章、新闻稿、论坛帖子、产品卡片等。它不是装饰性容器，而是有明确语义的结构标签，对 SEO、无障碍访问和内容组织都有实际意义。
什么时候该用 article？
满足以下任一条件就适合用 article：
- 内容能脱离当前页面独立存在（例如 RSS 订阅、分享到其他平台）
- 内容有明确的作者、发布时间、标题等元信息
- 同一页面中有多篇同类内容（如博客列表页里的每篇文章）
- 资讯卡片具备完整上下文（比如一条带标题、摘要、配图、来源的行业快讯）
基本结构示例（单篇博客）
一个语义清晰的博客文章 article 应包含标题、作者、时间、正文，必要时嵌套 header 和 footer：
如何理解 CSS Grid 的 auto-fit 与 auto-fill
作者：Jane Chen>｜发表于
CSS Grid 中的 auto-fit 和 auto-fill 常被混淆……
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
它们都作用于 repeat(auto-fit / auto-fill, ...)，但行为差异关键在“空轨道”处理方式。
资讯卡片怎么用 article？
即使内容简短，只要它是**自包含的信息单元**（比如一条行业快讯、一条产品更新提示），也适用 article。可搭配 figure、figcaption、time 提升语义：
OpenInfer 项目正式开源
由 MIT 与多家初创公司联合推出，支持低资源设备实时运行大模型。
注意几个常见误区
- 不要把整个博客首页或栏目页包进一个 article —— 那是 main 或 section 的职责
- 同一页面中多个 article 可以并列，无需额外父容器；若需分组（如“编辑推荐”），用 section 包裹更合适
- article 内部可以再嵌套 article（例如博客评论区每条评论也可用 article），体现内容层级
- 不加 header/footer 也不影响语义合法性，但加上会让结构更清晰、机器更易理解
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
