article是语义信号，标识独立可分发内容；必须含h1–h6标题，适用于博客正文、新闻卡片、用户评论等可脱离上下文理解的内容，禁用于布局容器、导航栏、页脚等非独立模块。
article 不是样式容器，而是语义信号——它告诉浏览器、搜索引擎和读屏软件：“这段内容是独立可分发的”。用对了，结构清晰、SEO友好、无障碍体验好；用错了，比如当
使，反而干扰内容理解。
什么内容该用 article？
核心判断标准：删掉周围内容后，它是否还能被理解、被分享、被 RSS 抓取？
- 一篇博客正文（含标题、作者、发布时间、正文、评论入口）
- 新闻网站首页的每条新闻卡片（有独立标题、导语、来源、时间）
- 论坛中每个帖子（含楼主信息、发帖时间、完整回复链）
- 产品列表页中的每个商品卡片（含名称、图、价格、简介、详情链接）
- 用户发布的长评或测评（结构完整、自成一体）
什么内容不该用 article？
常见误用会稀释语义价值，让辅助工具和爬虫难以识别主次。
- 整页布局容器（如把整个
或包进一个 ） - 页眉导航栏、面包屑、页脚版权信息
- 侧边栏的“热门标签”“相关推荐”列表（属于辅助信息，用
- 仅用于 CSS 布局的包裹层（无实质内容或语义，应使用）
- 文章内部的“引言”“小结”等子模块（它们依附于主文存在，用
即可） 嵌套使用 article 的合理场景
嵌套不是炫技，而是反映真实的“整体—部分”独立关系。
立即学习“前端免费学习笔记（深入）”；
- 主文章用
包裹，其下的每条评论若具备作者、时间、完整观点，也可各自用 表示 - 技术文档页中，“API 参考”本身是一份可单独发布的接口说明（有自己标题、版本号、更新时间），就该用
；而它内部的“请求参数”“响应示例”则用 - 避免“父 article 是页面，子 article 是按钮”这类逻辑断裂的嵌套
必须配合标题，否则语义不成立
自身不带语义标题，但它的语义完整性依赖内部至少一个 –
，且这个标题应描述该内容单元本身。
- 正确：
如何配置 Webpack 5
作者：王工｜2026-05-28
- 错误：
公司技术博客
—— 这是页面标题，不是 article 内容本身的标题 - 建议将标题放在
内，时间、作者等元信息可放在
- 文章内部的“引言”“小结”等子模块（它们依附于主文存在，用
