文章标签 - <article>

什么是 <article> 标签？

<article> 是HTML5引入的语义化标签，用于定义独立的、完整的、自包含的内容块。这些内容应该能够在不依赖页面其他部分的情况下单独存在和使用。

基本语法

html 
<article>
  <!-- 独立内容 -->
</article>

典型用法

博客文章

html 
<article>
  <header>
    <h2>博客文章标题</h2>
    <p>作者：张三 | 发布日期：2026-02-06</p>
  </header>
  <p>文章内容...</p>
  <footer>
    <p>标签：HTML, 语义化</p>
  </footer>
</article>

新闻报道

html 
<article>
  <h2>重要新闻标题</h2>
  <p>来源：新闻机构</p>
  <p>新闻内容...</p>
  <figure>
    <img src="news-image.jpg" alt="新闻图片">
    <figcaption>新闻图片说明</figcaption>
  </figure>
</article>

评论

html 
<article>
  <h3>用户评论</h3>
  <p>评论者：李四</p>
  <p>评论内容...</p>
</article>

产品卡片

html 
<article>
  <h3>产品名称</h3>
  <img src="product.jpg" alt="产品图片">
  <p>产品描述...</p>
  <p>价格：¥99.00</p>
  <button>加入购物车</button>
</article>

全局属性

<article> 标签支持所有HTML全局属性：

属性 描述
class 为元素指定一个或多个类名
id 为元素指定唯一ID
style 为元素指定内联样式
title 提供有关元素的额外信息

最佳实践

  1. 独立性原则：确保 <article> 内的内容可以独立于页面其他部分存在

  2. 可嵌套使用：可以在 <article> 内部嵌套另一个 <article>，例如在博客文章中包含评论

  3. 结合其他语义标签：与 <header>、<footer>、<section> 等标签配合使用，增强内容结构

  4. 提供完整信息：在 <article> 中包含足够的信息，使其可以单独被分发或复用

浏览器兼容性

  • Chrome 5+
  • Firefox 4+
  • Safari 5+
  • Opera 11.1+
  • IE 9+

总结

<article> 标签是HTML5中重要的语义化标签，它用于标识独立的内容单元，有助于：

  • 提高内容的可重用性，便于内容分发和 syndication
  • 增强搜索引擎优化，让搜索引擎更好地识别独立内容块
  • 改善可访问性，帮助辅助技术理解内容结构
  • 使代码更具可读性和可维护性
  • 支持未来的Web技术和标准
最后更新：2026-02-07