应仅包裹可独立分发、可复用的内容单元，如完整博文，须含（含标题）、正文语义标签、元信息（作者/时间/分类）及，多篇并列时须为同级兄弟元素，不可嵌套，且需配合、等其他语义标签协同生效。
article 标签该包哪些内容才符合语义规范
不是所有博客正文都适合直接塞进 <article></article> —— 它只适用于「可独立分发、可被复用」的内容单元。比如一篇带标题、作者、日期、正文、标签的完整博文，就符合；但侧边栏推荐文章列表、页脚版权声明、导航栏就不该包进去。
常见错误是把整页布局都套上 <article></article>，结果导致屏幕阅读器误判内容层级，SEO 也收不到正确语义信号。
- 必须包含至少一个
<header></header>（通常含<h1></h1>～<h6></h6>标题） - 正文段落用
<p></p>、列表用<ul></ul>/<ol></ol>，避免用<div> 模拟语义<li>作者、发布日期建议放在 <code><header></header>或<footer></footer>内，用<time datetime="2024-05-20">2024年5月20日</time>标注时间 - 用
<main></main>包裹整个博文列表区域，每篇用独立<article></article> - 如果某篇博文内引用了另一篇（如“延伸阅读”），被引用内容应保持原结构，不降级为
<section></section>或<div> <li>注意 <code><article></article>可以嵌套自身（比如评论区每条评论也可用<article></article>），但仅限于“对当前内容的独立回应”场景
如何处理多篇文章共存时的嵌套与结构
首页或归档页常有多个博文并列，这时每个 <article></article> 必须是同级兄弟元素，不能嵌套在另一个 <article></article> 里——语义上它们是平等的独立项。
容易踩的坑：有人为“统一控制样式”把所有博文包进一个外层 <article></article>，这会破坏语义，也让 RSS 抓取器无法识别单篇条目。
时间、作者、分类等元信息怎么放才不丢语义
这些信息不是装饰性文字，而是关键上下文。放在 <header></header> 里最自然，但很多人图省事丢在开头 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 里，结果搜索引擎和辅助技术完全忽略它们。
示例正确结构：
<article><header><h1>如何用 CSS Grid 实现响应式卡片布局</h1>
<p class="meta">
作者：<span>张三</span>，
发布于 <time datetime="2024-05-20">2024年5月20日</time>，
分类：<a href="/tag/css">CSS</a>、<a href="/tag/layout">布局</a>
</p>
</header><section><!-- 正文 --></section><footer><p>本文遵守 CC BY-NC-SA 4.0 协议</p>
</footer></article>
-
<time></time>的datetime属性必须是机器可读格式（如YYYY-MM-DD），显示文本可本地化 - 分类标签用
<a></a>而非纯文本，既保留链接能力，又明确其导航属性 - 版权信息建议放
<footer></footer>，而非<header></header>或正文末尾的<p></p>
为什么用了 article 却没提升 SEO 或无障碍体验
因为光有标签不够，还得配合其他语义要素。单独一个 <article></article> 不会自动触发搜索引擎加权，也不会让屏幕阅读器“读懂”内容逻辑。
真正起作用的是组合：标题层级是否连贯、<time></time> 是否带 datetime、是否有跳过重复导航的 <main></main>、图片是否带 alt……漏掉其中一环，<article></article> 就只是个空壳。
- 检查浏览器开发者工具的“Accessibility”面板，看
<article></article>是否被识别为“Article”角色 - 用 Lighthouse 做 SEO 和无障碍审计，重点关注“Document does not have a main landmark”这类提示
- 别依赖
<article></article>自动解决一切——它只是语义拼图中的一块，且必须和其他标签严丝合缝地咬合
