article标签仅声明内容独立可分发，不负责排版；需配合CSS及语义化子标签（如<header>含<h2>标题、<time>元信息）才能正确表达完整内容单元，否则语义失效、影响SEO与无障碍访问。
article 标签本身不负责排版，只声明“这段内容是独立可分发的”——想让它视觉上像一篇博客文章，必须配合 CSS 和语义化子标签，否则它和 div 在页面上完全没区别。
article 必须包裹完整内容单元，不能只包正文
很多人把 article 当成“正文容器”，只套 <p> 段落，这是错的。它要求内容自包含：至少得有标题、主体、元信息（作者/时间）三要素，否则搜索引擎可能降权，读屏软件会跳过。
- 正确结构要含一个
<h2>或更合适的标题级元素（不能缺） - 推荐用
<header>包标题和元数据，比如：<header><h2>CSS 变量的实际陷阱</h2><p>作者：张三 <time datetime="2026-04-15">2026年4月15日</time></p></header> - 正文用
<p>、<ul>等常规标签，别在article里硬塞<div class="content"> - 结尾可用
<footer>放标签、编辑链接、阅读数等，但不是强制项
多篇文章列表必须每个都用独立 article 标签
新闻首页、博客归档页这类地方，常见错误是只在外层套一个 article，或者用 section 代替。这会让 RSS 抓取器无法识别单条条目，也破坏语义树层级。
- 每条新闻/每篇博客都要各自包裹在独立的
<article>中 - 不要为了省代码写成：
<article><h3>标题1</h3><p>摘要1</p><h3>标题2</h3><p>摘要2</p></article>—— 这是一个article里塞了两个内容单元 - 嵌套只允许在逻辑上“子内容也满足独立性”的场景，比如主文章下的每条评论（带昵称、时间、完整观点），才用子
article - 评论区整体该用
<section>，里面每条评论才是<article>
样式必须自己写，浏览器不提供默认外观
article 在所有现代浏览器中都无默认 margin/padding/border，也不加任何字体或颜色。你看到的“分隔效果”全是 CSS 给的。
- 基础视觉区分建议：
article { border-left: 3px solid #007acc; padding: 1rem; margin-bottom: 1.5rem; } - 如果用
main包裹整个文章区域（如单篇博客页），main也需手动设样式，它同样无默认样式 - 避免用
article替代布局需求：侧边栏推荐、面包屑、页脚版权——这些该用<aside>、<nav>、<footer>，硬套article会污染语义 - IE8 及更早版本不认识
article，但不会崩，只是当普通div渲染；如需兼容，加document.createElement('article')或引入 html5shiv.js
标题层级错乱是最隐蔽的无障碍缺陷
很多页面在 article 里直接用 <h1>，结果整页出现多个 h1，破坏文档大纲。读屏软件靠这个导航，错乱后用户根本找不到主内容。
- 若页面只有一个核心内容（如单篇博客），
article内可用<h1>；但若页面是列表页，每篇用<h2>更安全 - 嵌套时子
article（如评论）标题应比父级低一级，比如父用h2，子用h3 - 别用
<div class="title">模拟标题——屏幕阅读器完全无法识别 - 检查方法：Chrome DevTools → Accessibility 面板 → 查看“Heading level”是否连续、合理
最容易被忽略的是：article 的价值不在页面上“看起来怎么样”，而在于它是否让机器（爬虫、读屏器）准确理解“哪段是能单独发布、被引用、被订阅的内容”。标题缺失、层级混乱、滥用嵌套，都会让这个信号失效——哪怕 CSS 写得再漂亮，语义也已经断了。
