<article>-独立内容块

<article> 是 HTML5 中用于定义独立内容块的语义化标签，适合标记可独立分发或重复使用的内容，如新闻文章、博客帖子或论坛评论。它的设计初衷是增强文档的结构化和可访问性。

<article> 的基本定义

<article> 标签表示文档中的一个独立内容单元，其内容应具备自包含性。即使脱离上下文，用户仍能理解其含义。典型的应用场景包括：

• 新闻或博客文章
• 论坛帖子
• 用户评论
• 产品卡片
• 交互式小组件

<article>
  <h2>如何种植多肉植物</h2>
  <p>多肉植物适合阳光充足的环境，浇水需遵循"见干见湿"原则...</p>
</article>

与其他容器标签的区别

对比 <div> 的差异

<div> 是通用容器，不具备语义价值；而 <article> 明确表示独立内容单元。屏幕阅读器等辅助技术会优先识别 <article>。

对比 <section> 的差异

<section> 用于主题分组，内容不一定独立；而 <article> 的内容应能独立存在。一个 <article> 内部可以包含多个 <section>：

<article>
  <h2>CSS Grid 布局指南</h2>
  <section>
    <h3>基本概念</h3>
    <p>Grid 布局由行和列组成...</p>
  </section>
  <section>
    <h3>常用属性</h3>
    <p>grid-template-columns 定义列宽...</p>
  </section>
</article>

嵌套使用规范

<article> 支持多层嵌套，适用于评论回复等场景。每个嵌套层级都应保持内容独立性：

<article class="blog-post">
  <h2>响应式设计原则</h2>
  <p>移动优先是现代网页设计的核心理念...</p>
  
  <article class="comment">
    <h3>用户A的评论</h3>
    <p>文章提到的视口单位很实用...</p>
    
    <article class="reply">
      <h4>作者回复</h4>
      <p>感谢补充，vh单位确实...</p>
    </article>
  </article>
</article>

可访问性增强

ARIA 角色补充

默认具有 role="article"，无需额外声明。但对于动态加载的内容，建议添加 aria-live 属性：

<article aria-live="polite">
  <h2>实时股票行情</h2>
  <p>阿里巴巴 (BABA): $89.23 ↑1.2%</p>
</article>

标题层级要求

每个 <article> 应包含标题元素 (<h1>-<h6>)，建议遵循逻辑层级：

<article>
  <h2>主标题</h2>
  <article>
    <h3>子章节标题</h3>  <!-- 层级递增 -->
  </article>
</article>

实际应用案例

新闻聚合页面

<main>
  <article class="news-item">
    <header>
      <h2>量子计算机突破新里程碑</h2>
      <time datetime="2023-05-15">2023年5月15日</time>
    </header>
    <p>研究人员实现了1000量子比特的稳定运行...</p>
    <footer>
      <a href="/news/123">阅读全文</a>
    </footer>
  </article>

  <article class="news-item">
    <h2>新型电池充电速度提升3倍</h2>
    <!-- 其他内容 -->
  </article>
</main>

电子商务产品列表

<section class="products">
  <article class="product-card">
    <img src="phone.jpg" alt="智能手机X">
    <h3>智能手机X</h3>
    <p>6.7英寸AMOLED屏幕，5000mAh电池</p>
    <button>加入购物车</button>
  </article>
  
  <article class="product-card">
    <img src="laptop.jpg" alt="超极本Pro">
    <!-- 其他产品信息 -->
  </article>
</section>

微数据与SEO优化

结合 Schema.org 标记增强搜索引擎理解：

<article itemscope itemtype="https://schema.org/BlogPosting">
  <h2 itemprop="headline">HTML5语义化标签详解</h2>
  <p itemprop="author">作者：李开发</p>
  <div itemprop="articleBody">
    <p>语义化标签对SEO有显著影响...</p>
  </div>
</article>

动态内容加载示例

通过 JavaScript 动态插入 <article> 元素：

fetch('/api/posts')
  .then(response => response.json())
  .then(posts => {
    const container = document.getElementById('posts-container');
    posts.forEach(post => {
      const article = document.createElement('article');
      article.innerHTML = `
        <h3>${post.title}</h3>
        <p>${post.excerpt}</p>
        <span>${new Date(post.date).toLocaleDateString()}</span>
      `;
      container.appendChild(article);
    });
  });

浏览器渲染特性

<article> 默认显示为块级元素，具有以下样式特征：

article {
  display: block;
  margin: 1em 0;  /* 多数浏览器默认样式 */
}

建议重置边距以保证跨浏览器一致性：

article {
  margin: 0;
  padding: 0;
  border: 0;
}

响应式设计实践

结合 CSS Grid 实现自适应布局：

<style>
  .article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }
</style>

<div class="article-grid">
  <article>...</article>
  <article>...</article>
  <article>...</article>
</div>

与Web组件的结合

在自定义元素中使用 <article> 作为 Shadow DOM 的容器：

class NewsCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    const article = document.createElement('article');
    article.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #ddd;
        }
      </style>
      <slot name="title"><h3>默认标题</h3></slot>
      <slot name="content"><p>默认内容</p></slot>
    `;
    shadow.appendChild(article);
  }
}
customElements.define('news-card', NewsCard);