仅用于可独立分发或复用的内容单元，如博客正文、新闻稿；须配语义化 heading，元信息用和；与（主题分组）和（无语义容器）有本质区别。

article标签怎么正确使用_独立内容区块写法【详解】

article 标签不是“随便包一段文字”的容器

它只该用于**能独立存在、可被单独分发或复用的内容单元**，比如一篇博客正文、一条新闻稿、一个论坛帖子。浏览器和 RSS 阅读器会据此识别内容边界，搜索引擎也依赖它判断主内容权重。误用 <article></article>（比如包导航栏、侧边栏、页脚说明）反而会干扰语义解析，让辅助技术更难理解页面结构。

✅ 正确场景：<article></article> 包裹整篇技术文章（含标题、段落、代码块、图表）
❌ 错误场景：<article></article> 仅包裹一个 <h3></h3> 标题，或用来替代 <div> 做布局 <li>⚠️ 嵌套规则：一个 <code><article></article> 内可嵌套多个 <article></article>（如评论区每条评论），但必须保持语义层级合理——子 <article></article> 应是父内容的独立衍生项，而非任意碎片

必须配 heading，且优先用

到

的自然顺序

<article></article> 没有强制要求内部必须有标题，但**缺失 heading 会让屏幕阅读器用户失去上下文，也会降低 SEO 可读性**。W3C 明确建议每个 <article></article> 至少包含一个 heading 元素，并按内容层级使用 <h1></h1>–<h6></h6>，而非全用 <h2></h2> 图省事。

如果页面只有一个主体内容（如单篇博文），<article></article> 内可用 <h1></h1>；但若页面含多个 <article></article>（如首页列表），每个应从 <h2></h2> 开始，避免出现多个 <h1></h1>
不要用 CSS 把 <h2></h2> 视觉上压成小字号来“伪装”成副标题——语义和样式要分离，heading 级别必须真实反映内容重要性
可以用 <header></header> 包裹 heading 和元信息（如作者、发布时间），但 <header></header> 不是必需的

时间、作者等元信息用 time 和 address 标签更精准

很多人把发布时间写成普通段落：<p>发布于 2024-05-20</p>。这丢失了机器可读性。<time></time> 和 <address></address> 是专门为这类信息设计的语义标签，配合 <article></article> 能显著提升结构化数据质量。

日期/时间必须用 <time datetime="2024-05-20">2024年5月20日</time>，datetime 属性值需为机器可解析格式（ISO 8601），显示文本可本地化
作者信息优先用 <address></address>（注意：它不表示物理地址，而是“内容责任方”），例如：<address>作者：<a href="https://www.php.cn/link/378a1f96defa50e36f4b9ae38b26d89a">John</a> </address>
避免用 <span></span> 或 <div> 手动拼接元信息——既无语义，又增加 JS 解析成本 <h3>和 section、div 的关键区别在哪</h3> <p>三者最常被混淆：<code><section></section> 表示主题相关的内容分组（如“安装步骤”“配置选项”），<div> 是纯样式/脚本钩子，而 <code><article></article> 的核心判据只有一个：**它是否在逻辑上能脱离当前页面，作为独立实体被订阅、转发、存档？**
- 博客列表页中，每篇文章卡片用 <article></article>；整个列表容器用 <section></section>（主题是“最新文章”）；页脚版权信息用 <div>（无语义，仅需定位或加样式） <li>同一段内容，如果出现在个人主页和 RSS 订阅源里都成立，大概率该用 <code><article></article>；如果只是页面内一个视觉区块（如“相关推荐”模块），用 <section></section> 更合适
- 嵌套时：<article></article> 内可用 <section></section>（如文章内的“性能测试结果”小节），但 <section></section> 内不应随意塞 <article></article>——除非那个区块本身具备独立传播价值（例如“用户评论精选”）