article标签应仅用于语义完整、可独立分发的内容单元，如单篇博客、新闻或论坛帖；每个列表项应各自用article包裹，内部建议含header（含h1–h6标题与iso格式time）、main正文及可选footer元数据；其语义强调可订阅/归档，区别于section（主题分组）和div（无语义容器）。
article 标签该用在什么位置
它只适合封装**语义上完整、可独立分发或复用的内容单元**，比如一篇博客正文、一则新闻、一个论坛帖子。不是所有“看起来像文章”的区块都该套 article —— 侧边栏推荐、作者简介卡片、分页导航这些都不算独立内容，用 section 或 div 更合适。
常见误用：把整页博客列表（含标题+摘要+发布时间）整个包进一个 article；正确做法是每个列表项（即每篇博客的摘要区块）各自用一个 article，里面再嵌套 header、main、footer 等语义子元素。
必须包含哪些子元素才合理
article 本身不强制要求子标签，但缺乏结构会削弱语义价值。实际项目中建议至少包含：
-
header：包裹h1–h6标题和可选的time发布时间 -
main或直接段落：p、figure、ul等正文内容 -
footer（可选）：作者信息、分类标签、阅读数等元数据
注意：time 标签里的 datetime 属性要写 ISO 8601 格式（如 2024-05-20），否则屏幕阅读器无法识别时间语义。
和 section、div 的关键区别在哪
三者视觉上没差别，区别全在语义和辅助技术处理逻辑上：
-
article表示「可单独订阅、转发、归档的内容」，RSS 抓取器、搜索引擎摘要、无障碍工具都会据此提取主体 -
section表示「主题相关的一组内容」，比如博客文末的「相关文章」区块，它依附于父内容存在 -
div是纯样式容器，没有任何语义，仅当上述两者都不适用时才用
性能影响极小，但错误嵌套会影响 SEO 和可访问性。例如把多个 article 套在一个没有标题的 section 里，会让 AT（辅助技术）用户难以定位主次关系。
常见报错与校验要点
用 W3C HTML 检查器（validator.w3.org）常遇到两类提示：
-
Article lacks heading. Consider using h2-h6 elements to add an informative heading.—— 必须在article内部有且仅有一个显式标题（h1–h6），不能靠 CSS 伪元素生成 -
The article element appears to be used incorrectly.—— 多半是嵌套过深，比如article > section > article，除非内层真是可独立存在的评论，否则应改用aside
容易被忽略的是：同一页面中多个 article 的标题层级应当保持逻辑递进（如列表页用 h2，点进去的详情页用 h1），否则破坏文档大纲。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
