69. article 标签

<article> 定义独立、自包含、可单独分发的内容块。

关键判断标准：如果把这部分内容从页面中抽走，它自己还能不能独立理解？

什么时候用 article

以下场景适合用 article：

<!-- 博客文章 -->
<article>
  <h2>深入理解闭包</h2>
  <p>闭包是 JavaScript 中一个核心概念...</p>
</article>

<!-- 新闻报道 -->
<article>
  <h2>科技新闻：新框架发布</h2>
  <p>今天某公司发布了全新前端框架...</p>
</article>

<!-- 用户评论 -->
<article>
  <h3>张三的评论</h3>
  <p>这篇文章讲得很清楚，学到了！</p>
</article>

<!-- 产品卡片 -->
<article>
  <h3>无线蓝牙耳机</h3>
  <p>价格：299 元</p>
  <button>加入购物车</button>
</article>

这些内容抽出来单独看，都有意义。这就是 article。

article 可以嵌套

一篇文章里可以有评论，评论本身也是独立的。

<article>
  <h2>文章标题</h2>
  <p>正文内容...</p>

  <section>
    <h3>评论</h3>
    <article>
      <h4>评论者：李四</h4>
      <p>写得太好了！</p>
    </article>
    <article>
      <h4>评论者：王五</h4>
      <p>有个问题想请教...</p>
    </article>
  </section>
</article>

每条评论都是一个独立的 article，嵌套在外层的 article 里。

article vs section

这是最容易混淆的两个标签。

article：独立的内容，抽走也能单独存在。 section：主题性的分组，内容之间有关系但不够独立。

实际判断技巧：看内容需不需要标题。如果能给它一个独立的标题，多半是 article。

<!-- 这些是独立的文章，用 article -->
<article><h2>新闻1</h2><p>...</p></article>
<article><h2>新闻2</h2><p>...</p></article>

<!-- 这是页面主题分区，用 section -->
<section>
  <h2>最新资讯</h2>
  <article>新闻1</article>
  <article>新闻2</article>
</section>

section 给一组 article 加一个共同标题。

article 与 time 的搭配

文章通常有发布时间，用 <time> 标记：

<article>
  <h2>文章标题</h2>
  <p>发布于 <time datetime="2026-07-28">2026年7月28日</time></p>
  <p>正文内容...</p>
</article>

datetime 属性给机器读的，标签文字给人读的。

完整示例：博客首页

<main>
  <h1>最新文章</h1>

  <article>
    <header>
      <h2>CSS Grid 实战技巧</h2>
      <p>作者：张三 | <time datetime="2026-07-28">7月28日</time></p>
    </header>
    <p>Grid 布局是 CSS 最强大的工具之一...</p>
    <footer>
      <a href="/css-grid">阅读全文</a>
    </footer>
  </article>

  <article>
    <header>
      <h2>JavaScript 异步编程</h2>
      <p>作者：李四 | <time datetime="2026-07-25">7月25日</time></p>
    </header>
    <p>Promise 和 async/await 是现代 JS 的基础...</p>
    <footer>
      <a href="/js-async">阅读全文</a>
    </footer>
  </article>
</main>

每篇文章是一个 article，有自己的 header 和 footer。结构完整。