标签是定义独立文章最准确、最轻量的做法，用于向浏览器、搜索引擎和屏幕阅读器声明内容可单独存在、可被RSS抓取、可脱离当前页面理解；其核心判断标准是内容能否脱离上下文仍保持完整语义和可理解性。
直接用 <article></article> 标签包裹整篇内容，是定义独立文章最准确、最轻量的做法。它不是装饰性标签，而是向浏览器、搜索引擎和屏幕阅读器明确声明：“这段内容可单独存在、可被 RSS 抓取、可脱离当前页面理解”。
什么时候必须用 <article></article> 而不是 <section></section> 或 <div>
<p>判断依据只有一个：内容能否脱离当前页面上下文，仍保持完整语义和可理解性。</p>
<ul>
<li>博客正文、新闻稿全文、产品详情页主文案 → 必须用 <code><article></article>
<article></article> 中，不能共用一个<section></section> 适合“引言”“方法论”“结论”这类依附于主文的子区块；<div> 仅用于样式或 JS 控制，无语义
<li>滥用 <code><article></article>（比如把导航栏、广告位也包进去）会稀释语义，反而降低 SEO 和可访问性得分
<article></article> 内部结构怎么组织才合规
HTML5 规范没强制要求子元素，但真实场景中，合理嵌套能强化语义表达力。
- 标题必须用
<header></header>包裹<h1></h1>～<h6></h6>，而非直接丢个<h2></h2> - 作者、发布时间建议用
<time datetime="2026-04-18">2026年4月18日</time>，而非纯文本 - 评论区若每条评论都算独立观点，可用嵌套
<article></article>，但需确保内层也有自己的<header></header>和主体 - 避免在
<article></article>里塞<main></main>——<main></main>是页面级容器，不能作为<article></article>的子元素
嵌套 <article></article> 容易踩的兼容性与解析坑
嵌套本身合法，但实际渲染和抓取行为受解析器影响较大。
- RSS 阅读器通常只识别顶层
<article></article>，内层嵌套可能被忽略或误判为普通段落 - 部分旧版屏幕阅读器对嵌套
<article></article>的层级播报不清晰，建议用<aside></aside>替代非核心的嵌套内容（如侧边引用） - 如果嵌套层级超过两层（如 article → article → article），Google Search Console 可能无法正确提取发布日期或作者字段
- 测试时可用 Chrome DevTools 的 Accessibility 面板查看“Landmark”结构，确认每个
<article></article>是否被识别为独立 landmark
真正难的不是写对标签，而是每次加 <article></article> 前，都得问一句：这段内容，剪下来发到另一个网站，别人能看懂吗？—— 这个判断比语法更重要。
