PHP小码农

Appearance

article 文章 ​

<article> 元素表示页面中一个独立的、完整的内容单元，例如一篇博客文章、一条新闻、一个用户评论、一个论坛帖子等。<article> 的关键特征是内容的独立性——它可以被单独提取出来，放到 RSS 订阅、打印页面或其他网站中，仍然是有意义的。

前置知识

阅读本节前，建议先了解：main 主体内容

基础概念 ​

什么是 article ​

<article> 表示一个独立的、可重用的内容区块。判断一个内容是否应该使用 <article> 的核心标准是"联合发布测试"（Syndication Test）：如果这个内容可以被单独提取出来（比如通过 RSS）、放到其他上下文中，是否仍然有意义？

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>article 示例</title>
</head>
<body>
  <main>
    <!-- 博客文章：典型的 article -->
    <article>
      <header>
        <h1>HTML5 语义化标签入门</h1>
        <p>作者：<address><a href="mailto:zhang@example.com">张三</a></address></p>
        <time datetime="2024-01-15">2024 年 1 月 15 日</time>
      </header>
      <p>HTML5 引入了许多语义化标签...</p>
      <footer>
        <p>标签：HTML、语义化</p>
      </footer>
    </article>
  </main>
</body>
</html>

article 的隐式角色 ​

属性值说明
隐式角色article浏览器自动映射为 article 角色
可访问性屏幕阅读器识别为独立内容单元用户可以快速定位和跳转

适合使用 article 的内容 ​

内容类型示例说明
博客文章技术教程、生活随笔完整独立的文章
新闻报道体育新闻、科技新闻独立的新闻条目
论坛帖子问答帖、讨论帖独立的帖子内容
用户评论文章评论、产品评价独立的评论内容
产品卡片电商商品展示可独立展示的产品信息
独立小组件天气卡片、股票卡片自包含的信息组件

语法与使用 ​

基本语法 ​

html
<article>
  <!-- 文章头部（可选） -->
  <header>
    <h2>文章标题</h2>
    <p>发布信息...</p>
  </header>

  <!-- 文章正文 -->
  <p>正文内容...</p>
  <section>
    <h3>子章节</h3>
    <p>子章节内容...</p>
  </section>

  <!-- 文章底部（可选） -->
  <footer>
    <p>附加信息...</p>
  </footer>
</article>

article 可以包含的子元素 ​

html
<article>
  <header>     <!-- 文章头部 -->
    <h1>标题</h1>
    <time>日期</time>
    <address>作者</address>
  </header>

  <section>     <!-- 内容章节 -->
    <h2>章节标题</h2>
    <p>内容...</p>
  </section>

  <figure>     <!-- 图表 -->
    <img src="chart.png" alt="数据图表">
    <figcaption>图1：销售数据</figcaption>
  </figure>

  <footer>     <!-- 文章底部 -->
    <p>标签、分享、评论数等</p>
  </footer>

  <!-- 嵌套的 article（如评论） -->
  <article>
    <header>
      <h3>用户评论</h3>
    </header>
    <p>评论内容...</p>
  </article>
</article>

详细说明 ​

联合发布测试（Syndication Test） ​

判断内容是否适合用 <article>：

  1. 这段内容能否独立存在？
  2. 把它提取出来放到 RSS 中，是否仍然有意义？
  3. 把它放到完全不同的页面上下文中，读者是否能理解？
  4. 它是否有自己的标题？
html
<!-- 适合 article：独立、完整的内容 -->
<article>
  <h2>2024 年前端开发趋势</h2>
  <time datetime="2024-01-01">2024 年 1 月 1 日</time>
  <p>本文分析了 2024 年前端领域的主要趋势...</p>
</article>

<!-- 不适合 article：依赖上下文的内容 -->
<p>上一节我们介绍了 CSS 的基础知识，接下来将学习...</p>
<!-- 这段话脱离上下文就没有意义，不应该用 article -->

<!-- 适合 article：产品评论 -->
<article class="review">
  <h3>用户：李四</h3>
  <p>这个产品非常好，使用体验很流畅。</p>
  <footer>
    <time datetime="2024-01-10">2024-01-10</time>
    <p>评分：5/5</p>
  </footer>
</article>

<!-- 不适合 article：普通的段落描述 -->
<div class="product-description">
  <p>这是一款轻薄便携的笔记本电脑...</p>
  <p>配置：Intel i7, 16GB RAM, 512GB SSD</p>
</div>
<!-- 这是产品描述，不是独立内容，用 div 更合适 -->

article 的嵌套使用 ​

<article> 可以嵌套使用，最常见的场景是文章中包含评论：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>article 嵌套示例 - 文章评论</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; color: #333; background: #f5f5f5; }

    .page-header { background: #2c3e50; color: #fff; padding: 1rem 2rem; }

    main { max-width: 800px; margin: 2rem auto; padding: 0 1rem; }

    /* 文章样式 */
    .blog-article {
      background: #fff; padding: 2rem; border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 2rem;
    }
    .blog-article header { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #eee; }
    .blog-article header h1 { font-size: 1.5rem; }
    .blog-meta { color: #7f8c8d; font-size: 0.85rem; margin-top: 0.5rem; }
    .blog-article footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #eee; }
    .blog-article footer p { color: #95a5a6; font-size: 0.85rem; }

    /* 评论区域 */
    .comments-section h2 { font-size: 1.2rem; margin-bottom: 1.5rem; color: #2c3e50; }

    /* 每条评论是一个嵌套的 article */
    .comment {
      background: #fff; padding: 1.25rem; border-radius: 8px;
      margin-bottom: 1rem; border-left: 3px solid #3498db;
    }
    .comment header {
      display: flex; align-items: center; gap: 0.75rem;
      margin-bottom: 0.75rem;
    }
    .comment-avatar {
      width: 40px; height: 40px; border-radius: 50%;
      background: #e0e0e0; display: flex; align-items: center;
      justify-content: center; font-size: 1.1rem; color: #666;
    }
    .comment-author { font-weight: 600; font-size: 0.95rem; }
    .comment-time { color: #95a5a6; font-size: 0.8rem; }
    .comment p { font-size: 0.9rem; line-height: 1.6; }

    /* 回复的评论（更深嵌套） */
    .comment .comment { margin-left: 3rem; border-left-color: #2ecc71; }
  </style>
</head>
<body>
  <header class="page-header">
    <h1>TechBlog</h1>
  </header>

  <main>
    <!-- 主文章 -->
    <article class="blog-article">
      <header>
        <h1>JavaScript Promise 详解</h1>
        <p class="blog-meta">
          作者：<address><a href="mailto:author@example.com" style="color:#3498db">张三</a></address>
          &middot; <time datetime="2024-01-15">2024 年 1 月 15 日</time>
        </p>
      </header>

      <p>Promise 是 JavaScript 中处理异步操作的重要机制。它表示一个异步操作的最终完成（或失败）及其结果值。</p>
      <p>Promise 有三种状态：pending（进行中）、fulfilled（已完成）、rejected（已拒绝）。</p>

      <footer>
        <p>标签：JavaScript、异步编程、Promise</p>
      </footer>

      <!-- 评论区域 -->
      <section class="comments-section">
        <h2>评论 (3)</h2>

        <!-- 评论 1：嵌套的 article -->
        <article class="comment">
          <header>
            <div class="comment-avatar">W</div>
            <div>
              <p class="comment-author">王五</p>
              <time class="comment-time" datetime="2024-01-16">2024-01-16</time>
            </div>
          </header>
          <p>写得很清晰！终于理解了 Promise 的链式调用。</p>

          <!-- 对评论的回复：更深层的嵌套 article -->
          <article class="comment">
            <header>
              <div class="comment-avatar">Z</div>
              <div>
                <p class="comment-author">张三（作者）</p>
                <time class="comment-time" datetime="2024-01-16">2024-01-16</time>
              </div>
            </header>
            <p>谢谢支持！后续会出一篇 async/await 的文章。</p>
          </article>
        </article>

        <!-- 评论 2 -->
        <article class="comment">
          <header>
            <div class="comment-avatar">L</div>
            <div>
              <p class="comment-author">李四</p>
              <time class="comment-time" datetime="2024-01-17">2024-01-17</time>
            </div>
          </header>
          <p>建议补充 Promise.all 和 Promise.race 的用法对比。</p>
        </article>
      </section>
    </article>
  </main>
</body>
</html>

article 内的 section ​

<article> 内部可以使用 <section> 来组织内容的章节结构：

html
<article>
  <header>
    <h1>CSS Flexbox 完全指南</h1>
    <p>发布于 <time datetime="2024-02-01">2024 年 2 月 1 日</time></p>
  </header>

  <section id="intro">
    <h2>什么是 Flexbox</h2>
    <p>Flexbox 是一种一维布局模型...</p>
  </section>

  <section id="basics">
    <h2>基础概念</h2>
    <p>容器和项目是 Flexbox 的两个核心概念...</p>
  </section>

  <section id="advanced">
    <h2>高级用法</h2>
    <p>Flexbox 还支持对齐、换行等高级特性...</p>
  </section>

  <footer>
    <p>标签：CSS、Flexbox、布局</p>
  </footer>
</article>

实战示例 ​

产品列表页面 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品列表 - article 示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; background: #f0f2f5; }

    .page-header { background: #1890ff; color: #fff; padding: 1rem 2rem; }
    .page-header-inner {
      max-width: 1200px; margin: 0 auto;
      display: flex; justify-content: space-between; align-items: center;
    }
    .page-header nav a { color: rgba(255,255,255,0.85); text-decoration: none; margin-left: 1.5rem; }

    main { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }

    .product-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem;
    }

    /* 每个产品卡片是一个 article */
    .product-card {
      background: #fff; border-radius: 8px; overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .product-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }

    .product-image {
      width: 100%; height: 200px; object-fit: cover;
      background: #e8e8e8; display: flex; align-items: center;
      justify-content: center; color: #999; font-size: 3rem;
    }

    .product-info { padding: 1.25rem; }
    .product-info h3 { font-size: 1rem; margin-bottom: 0.5rem; }
    .product-info p { color: #666; font-size: 0.85rem; margin-bottom: 0.75rem; }
    .product-price { color: #f5222d; font-size: 1.25rem; font-weight: 700; }
    .product-price .original { color: #999; font-size: 0.85rem; text-decoration: line-through; font-weight: normal; }
  </style>
</head>
<body>
  <header class="page-header">
    <div class="page-header-inner">
      <h1>电子商城</h1>
      <nav aria-label="主导航">
        <a href="/">首页</a>
        <a href="/products">商品</a>
        <a href="/cart">购物车</a>
      </nav>
    </div>
  </header>

  <main>
    <h2>热门商品</h2>
    <div class="product-grid">
      <!-- 每个产品是一个独立的 article -->
      <article class="product-card">
        <header>
          <div class="product-image">&#128241;</div>
        </header>
        <div class="product-info">
          <h3>智能手机 Pro Max</h3>
          <p>6.7 英寸 AMOLED 屏幕，A17 仿生芯片</p>
          <p class="product-price">
            ¥8999 <span class="original">¥9999</span>
          </p>
        </div>
      </article>

      <article class="product-card">
        <header>
          <div class="product-image">&#127911;</div>
        </header>
        <div class="product-info">
          <h3>无线降噪耳机</h3>
          <p>主动降噪，30 小时续航</p>
          <p class="product-price">
            ¥1999 <span class="original">¥2499</span>
          </p>
        </div>
      </article>

      <article class="product-card">
        <header>
          <div class="product-image">&#128187;</div>
        </header>
        <div class="product-info">
          <h3>轻薄笔记本电脑</h3>
          <p>14 英寸 2K 屏幕，16GB 内存</p>
          <p class="product-price">
            ¥6999 <span class="original">¥7999</span>
          </p>
        </div>
      </article>

      <article class="product-card">
        <header>
          <div class="product-image">&#9201;</div>
        </header>
        <div class="product-info">
          <h3>智能手表 Ultra</h3>
          <p>钛合金表壳，GPS + 蜂窝网络</p>
          <p class="product-price">
            ¥5999 <span class="original">¥6499</span>
          </p>
        </div>
      </article>
    </div>
  </main>
</body>
</html>

注意事项 ​

article vs section ​

特征articlesection
独立性独立、可单独提取依赖上下文
联合发布可以在 RSS/聚合中发布通常不能独立发布
标题通常有标题必须有标题
嵌套可以嵌套 article可以包含在 article 内
典型内容文章、评论、产品内容章节、标签分组
html
<!-- article：独立的文章 -->
<article>
  <h2>如何学习 CSS Grid</h2>
  <p>这是一篇完整的教程...</p>
</article>

<!-- section：文章内的一个章节 -->
<section>
  <h2>Grid 的基础属性</h2>
  <p>这部分讲解 grid-template-columns...</p>
</section>

常见错误 ​

  1. 滥用 article：不是所有 div 都需要替换为 article
  2. 缺少标题：article 通常应该有一个标题（h1-h6）
  3. article 内没有实际内容：空 article 没有意义

最佳实践 ​

  1. 使用联合发布测试判断：问自己"这段内容能否独立存在且有意义"
  2. article 内使用 header/footer：为文章添加头部和底部信息
  3. 为 article 添加标题：使用 h1-h6 为每个 article 定义标题
  4. 嵌套评论用 article：每条评论是独立的 article
  5. 配合 time 和 address 使用：标注发布时间和作者信息

下一节

继续学习：section 章节

参考链接 ​