应使用 article 标签标记独立、可单独分发或复用的内容单元,如博客文章、新闻报道、论坛帖子、用户评论;它强调语义完整性,要求内容能脱离页面独立存在,并建议包含标题、时间、作者等元数据以增强可访问性与SEO效果。

article 标签用于标识页面中**独立、可单独分发或复用的内容单元**,比如博客文章、新闻报道、论坛帖子、用户评论等。它不是单纯为了“看起来像一篇文章”而用,而是向浏览器和辅助技术明确传达:这段内容有完整语义,能脱离当前页面独立存在(例如被 RSS 抓取、被搜索引擎作为独立条目索引)。
什么时候该用 article?
满足以下任一条件时,优先考虑 article:
- 内容可以单独发布在其他平台(如微信公众号转载一篇博客正文)
- 内容有自己独立的标题、作者、发布时间(哪怕只在 metadata 中体现)
- 同一页面中有多篇同类内容并列展示(如首页的 5 篇最新文章)
- 它是用户主动点击进入的“目标页主体”,而非导航栏、侧边栏等辅助区域
基本结构示例
一个语义清晰的 article 至少包含标题(h1–h6),推荐加上时间与作者信息:
如何理解 HTML5 的语义化标签
· 作者:Zhang San
立即学习“前端免费学习笔记(深入)”;
HTML5 引入了多个语义化标签……
其中 article 表示自包含的内容……
嵌套与组合要点
article 可以嵌套使用——比如一篇主文章里引用另一篇完整的评论,那条评论本身也可用 article 包裹:
- 外层 article 是主博文,内层 article 是某条具备完整信息的用户评论(含昵称、头像、发布时间、正文)
- 避免滥用:普通段落、说明文字、操作按钮等非独立内容,不要硬套 article
- 可与 section 配合:article 内可用 section 划分小节(如“背景”“方法”“结论”),但 section 不代表独立内容
别忽略的细节
提升语义准确性的实用建议:
- 为每个 article 添加 id 属性(如
id="post-123"),方便锚点链接和 JS 操作 - 用 time[datetime] 标注精确时间(ISO 8601 格式),比纯文本更利于机器识别
- 若内容来自第三方(如转载),可在 footer 或 aside 中注明来源,保持归属清晰
- 不强制要求必须有 header/footer,但缺少标题(h1–h6)会削弱独立性语义



















