pin_drop当前位置:知识文库 ❯ 图文
HTML article标签详解 - article标签用法与最佳实践
教程简介
<article> 标签是HTML5引入的语义化标签，用于表示页面中独立的、完整的内容块。一个 <article> 应该是自包含的，即使脱离页面上下文也能独立理解和传播。典型的应用场景包括博客文章、新闻报道、论坛帖子、用户评论等。本教程将详细介绍 <article> 标签的使用方法、适用场景，以及如何正确区分 <article> 与 <section>。
核心概念
article标签的定义
<article> 标签表示文档、页面或网站中独立的、完整的内容块。判断是否使用 <article> 的核心标准是：这段内容是否可以独立分发或被其他页面引用？
如果答案是"是"，就应该使用 <article>。
article的独立性特征
典型的article内容
语法与用法
基本语法
代码示例
<article>
<!-- 独立的完整内容 -->
</article>属性
<article> 标签支持所有全局属性：
嵌套规则
article的典型内部结构
代码示例
<article>
<header>
<h1>标题</h1>
<p>元信息（作者、日期等）</p>
</header>
<p>正文内容...</p>
<section>
<h2>章节标题</h2>
<p>章节内容...</p>
</section>
<footer>
<p>标签、分类等信息</p>
</footer>
</article>代码示例
示例1：博客文章列表
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客文章列表示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
color: #333;
background: #f5f5f5;
}
header {
background: #2c3e50;
color: white;
padding: 1.5rem 2rem;
text-align: center;
}
header h1 {
font-size: 1.8rem;
}
main {
max-width: 800px;
margin: 2rem auto;
padding: 0 2rem;
}
.post-card {
background: white;
border-radius: 8px;
padding: 2rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: transform 0.2s, box-shadow 0.2s;
}
.post-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.post-category {
display: inline-block;
background: #3498db;
color: white;
padding: 0.15rem 0.6rem;
border-radius: 3px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 0.8rem;
}
.post-card h2 {
font-size: 1.4rem;
color: #2c3e50;
margin-bottom: 0.5rem;
}
.post-card h2 a {
color: inherit;
text-decoration: none;
}
.post-card h2 a:hover {
color: #3498db;
}
.post-meta {
display: flex;
gap: 1rem;
color: #7f8c8d;
font-size: 0.85rem;
margin-bottom: 1rem;
}
.post-excerpt {
color: #555;
line-height: 1.8;
margin-bottom: 1rem;
}
.read-more {
color: #3498db;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
}
.read-more:hover {
text-decoration: underline;
}
.post-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #f0f0f0;
}
.tag {
background: #ecf0f1;
color: #555;
padding: 0.2rem 0.6rem;
border-radius: 3px;
font-size: 0.8rem;
text-decoration: none;
}
.tag:hover {
background: #d5dbdb;
}
footer {
text-align: center;
padding: 2rem;
color: #7f8c8d;
}
</style>
</head>
<body>
<header>
<h1>技术博客</h1>
</header>
<main>
<article class="post-card">
<header>
<span class="post-category">前端开发</span>
<h2><a href="/post/1">深入理解HTML5语义化标签</a></h2>
<div class="post-meta">
<span>作者：张三</span>
<time datetime="2025-03-15">2025年3月15日</time>
<span>阅读：8分钟</span>
</div>
</header>
<p class="post-excerpt">
HTML5引入了一系列语义化标签，这些标签让开发者能够更准确地描述页面内容的结构和含义。本文将深入探讨这些标签的实际应用和最佳实践。
</p>
<a href="/post/1" class="read-more">阅读全文 →</a>
<div class="post-tags">
<a href="/tag/html5" class="tag">HTML5</a>
<a href="/tag/semantic" class="tag">语义化</a>
<a href="/tag/accessibility" class="tag">可访问性</a>
</div>
</article>
<article class="post-card">
<header>
<span class="post-category">CSS</span>
<h2><a href="/post/2">CSS Grid布局完全指南</a></h2>
<div class="post-meta">
<span>作者：李四</span>
<time datetime="2025-03-12">2025年3月12日</time>
<span>阅读：12分钟</span>
</div>
</header>
<p class="post-excerpt">
CSS Grid是现代CSS中最强大的布局系统之一。本文将从基础概念到高级技巧，全面介绍CSS Grid的使用方法。
</p>
<a href="/post/2" class="read-more">阅读全文 →</a>
<div class="post-tags">
<a href="/tag/css" class="tag">CSS</a>
<a href="/tag/grid" class="tag">Grid</a>
<a href="/tag/layout" class="tag">布局</a>
</div>
</article>
<article class="post-card">
<header>
<span class="post-category">JavaScript</span>
<h2><a href="/post/3">JavaScript异步编程深入解析</a></h2>
<div class="post-meta">
<span>作者：王五</span>
<time datetime="2025-03-10">2025年3月10日</time>
<span>阅读：15分钟</span>
</div>
</header>
<p class="post-excerpt">
异步编程是JavaScript的核心特性之一。从回调函数到Promise再到async/await，本文将深入解析JavaScript异步编程的演进历程。
</p>
<a href="/post/3" class="read-more">阅读全文 →</a>
<div class="post-tags">
<a href="/tag/javascript" class="tag">JavaScript</a>
<a href="/tag/async" class="tag">异步编程</a>
<a href="/tag/promise" class="tag">Promise</a>
</div>
</article>
</main>
<footer>
<p>© 2025 技术博客. 保留所有权利.</p>
</footer>
</body>
</html>示例2：文章与嵌套评论
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章与嵌套评论示例</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Georgia, serif; line-height: 1.8; color: #333; background: #fafafa; }
main {
max-width: 750px;
margin: 2rem auto;
padding: 0 2rem;
}
.blog-post {
background: white;
padding: 2.5rem;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}
.blog-post h1 {
font-size: 1.8rem;
color: #1a1a1a;
margin-bottom: 0.8rem;
}
.post-meta {
color: #888;
font-size: 0.9rem;
font-family: sans-serif;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #eee;
}
.blog-post p {
margin-bottom: 1rem;
}
.comments-section {
margin-top: 2rem;
}
.comments-section h2 {
font-size: 1.3rem;
color: #2c3e50;
margin-bottom: 1.5rem;
font-family: sans-serif;
}
.comment {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
margin-bottom: 1rem;
}
.comment-header {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 0.8rem;
}
.comment-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: bold;
color: #666;
}
.comment-author {
font-weight: 600;
color: #2c3e50;
font-family: sans-serif;
}
.comment-time {
color: #aaa;
font-size: 0.8rem;
font-family: sans-serif;
}
.comment-body {
color: #555;
font-family: sans-serif;
font-size: 0.95rem;
}
.comment-replies {
margin-left: 2rem;
margin-top: 1rem;
padding-left: 1rem;
border-left: 3px solid #f0f0f0;
}
</style>
</head>
<body>
<main>
<!-- 主文章 -->
<article class="blog-post">
<header>
<h1>HTML5语义化的实践意义</h1>
<div class="post-meta">
作者：张三 | <time datetime="2025-03-15">2025年3月15日</time>
</div>
</header>
<p>HTML5语义化标签的引入，标志着Web开发从"布局驱动"向"内容驱动"的转变。通过使用具有明确含义的标签，我们不仅让代码更易读，还提升了页面的可访问性和SEO效果。</p>
<p>在实际开发中，正确使用语义化标签需要理解每个标签的语义边界。article标签表示独立完整的内容，section标签表示内容的主题分组，两者虽然相似，但使用场景有明显区别。</p>
<section class="comments-section">
<h2>评论 (2)</h2>
<!-- 评论1 -->
<article class="comment">
<header class="comment-header">
<span class="comment-avatar">李</span>
<div>
<span class="comment-author">李四</span>
<time class="comment-time" datetime="2025-03-16">2025年3月16日</time>
</div>
</header>
<p class="comment-body">非常棒的文章！语义化标签确实让代码结构更清晰了。</p>
<div class="comment-replies">
<article class="comment">
<header class="comment-header">
<span class="comment-avatar">张</span>
<div>
<span class="comment-author">张三（作者）</span>
<time class="comment-time" datetime="2025-03-16">2025年3月16日</time>
</div>
</header>
<p class="comment-body">谢谢支持！后续会继续分享更多前端知识。</p>
</article>
</div>
</article>
<!-- 评论2 -->
<article class="comment">
<header class="comment-header">
<span class="comment-avatar">王</span>
<div>
<span class="comment-author">王五</span>
<time class="comment-time" datetime="2025-03-17">2025年3月17日</time>
</div>
</header>
<p class="comment-body">请问article和section到底怎么区分？有时候感觉两个都可以用。</p>
</article>
</section>
</article>
</main>
</body>
</html>示例3：产品卡片列表
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品卡片示例</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: sans-serif; line-height: 1.6; color: #333; background: #f5f5f5; }
header {
background: #2c3e50;
color: white;
padding: 1.5rem 2rem;
text-align: center;
}
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;
}
.product-card {
background: white;
border-radius: 10px;
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(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.product-image {
width: 100%;
height: 200px;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
}
.product-info {
padding: 1.5rem;
}
.product-info h3 {
font-size: 1.1rem;
color: #2c3e50;
margin-bottom: 0.5rem;
}
.product-info p {
color: #666;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.product-price {
font-size: 1.3rem;
font-weight: 700;
color: #e74c3c;
margin-bottom: 1rem;
}
.product-price .original {
font-size: 0.85rem;
color: #aaa;
text-decoration: line-through;
font-weight: 400;
margin-left: 0.5rem;
}
.btn-cart {
display: block;
width: 100%;
padding: 0.7rem;
background: #3498db;
color: white;
border: none;
border-radius: 6px;
font-size: 0.95rem;
cursor: pointer;
transition: background 0.3s;
}
.btn-cart:hover {
background: #2980b9;
}
</style>
</head>
<body>
<header>
<h1>在线商城</h1>
</header>
<main>
<div class="product-grid">
<article class="product-card">
<div class="product-image">💻</div>
<div class="product-info">
<h3>高性能笔记本电脑</h3>
<p>搭载最新处理器，16GB内存，512GB固态硬盘</p>
<div class="product-price">
¥5,999 <span class="original">¥7,999</span>
</div>
<button class="btn-cart">加入购物车</button>
</div>
</article>
<article class="product-card">
<div class="product-image">📱</div>
<div class="product-info">
<h3>旗舰智能手机</h3>
<p>6.7英寸AMOLED屏幕，5000万像素摄像头</p>
<div class="product-price">
¥3,999 <span class="original">¥4,999</span>
</div>
<button class="btn-cart">加入购物车</button>
</div>
</article>
<article class="product-card">
<div class="product-image">🎧</div>
<div class="product-info">
<h3>无线降噪耳机</h3>
<p>主动降噪，40小时续航，Hi-Res认证</p>
<div class="product-price">
¥1,299 <span class="original">¥1,699</span>
</div>
<button class="btn-cart">加入购物车</button>
</div>
</article>
<article class="product-card">
<div class="product-image">⏱</div>
<div class="product-info">
<h3>智能运动手表</h3>
<p>心率监测，GPS定位，50米防水</p>
<div class="product-price">
¥1,599 <span class="original">¥1,999</span>
</div>
<button class="btn-cart">加入购物车</button>
</div>
</article>
</div>
</main>
</body>
</html>浏览器兼容性
注意事项与最佳实践
1. article必须具有独立性
代码示例
<!-- 正确：独立完整的博客文章 -->
<article>
<h1>文章标题</h1>
<p>完整的内容...</p>
</article>
<!-- 错误：非独立内容不应使用article -->
<article>
<h1>公司简介</h1>
<p>我们是一家...（这不是独立可分发的内容）</p>
</article>2. article内应包含标题
代码示例
<!-- 正确：article内有标题 -->
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
<!-- 不推荐：article内没有标题 -->
<article>
<p>没有标题的内容...</p>
</article>3. article可以嵌套
代码示例
<!-- 正确：评论嵌套在文章内 -->
<article>
<h1>文章标题</h1>
<p>文章内容...</p>
<article>
<h2>评论标题</h2>
<p>评论内容...</p>
</article>
</article>4. article与section的选择
代码示例
<!-- 使用article：内容可以独立分发 -->
<article>
<h1>新闻报道</h1>
<p>新闻内容...</p>
</article>
<!-- 使用section：内容是主题分组，不能独立分发 -->
<section>
<h1>公司简介</h1>
<p>公司介绍...</p>
</section>5. article内可以使用header和footer
代码示例
<article>
<header>
<h1>文章标题</h1>
<time datetime="2025-03-15">2025年3月15日</time>
</header>
<p>文章正文...</p>
<footer>
<p>标签：HTML5, 语义化</p>
</footer>
</article>代码规范示例
规范的article使用
代码示例
<!-- 博客文章 -->
<article class="blog-post" itemscope itemtype="https://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">文章标题</h1>
<div class="post-meta">
<span itemprop="author">作者：张三</span>
<time datetime="2025-03-15" itemprop="datePublished">2025年3月15日</time>
</div>
</header>
<div itemprop="articleBody">
<p>文章正文内容...</p>
</div>
<footer>
<div class="post-tags">
<a href="/tag/html5" rel="tag">HTML5</a>
<a href="/tag/semantic" rel="tag">语义化</a>
</div>
</footer>
</article>
<!-- 用户评论 -->
<article class="comment" itemscope itemtype="https://schema.org/Comment">
<header>
<span itemprop="author">评论者姓名</span>
<time datetime="2025-03-16" itemprop="dateCreated">2025年3月16日</time>
</header>
<p itemprop="text">评论内容...</p>
</article>常见问题与解决方案
常见问题
article和section到底怎么区分？
核心判断标准是"独立性"。如果内容可以独立分发（如RSS、社交媒体分享），使用 <article>；如果只是内容的主题分组，使用 <section>。当不确定时，优先考虑 <section>。
产品列表中的每个产品都应该用article吗？
是的。每个产品卡片都是独立的内容，可以单独被引用、分享或收藏，符合 <article> 的语义。
article内可以有多个section吗？
可以。长文章通常包含多个章节，每个章节可以用 <section> 包裹。
侧边栏的推荐文章列表应该用article吗？
侧边栏中的每个推荐文章条目可以使用 <article>，因为每条推荐都是独立的内容。但整个推荐列表区域应该用 <aside> 包裹。
article可以替代div吗？
不可以。<article> 有明确的语义——表示独立完整的内容。如果仅仅是为了样式或脚本需要容器，应使用 <div>。
总结
<article> 标签是HTML语义化体系中的重要元素，关键要点如下：
-
独立性：
<article>表示独立、完整的内容，可以脱离页面上下文单独理解 -
可分发性：内容应该可以被独立分发或引用（如RSS、社交媒体分享）
-
包含标题：最佳实践是每个
<article>内都包含标题元素 -
可嵌套：
<article>可以嵌套使用，如评论嵌套在文章内 -
与section区分：
<article>强调独立性，<section>强调主题分组
正确使用 <article> 标签，能让页面内容结构更加清晰，提升SEO效果和可访问性，是构建内容丰富型网站的关键技能。
标签：
HTML article
独立内容
语义化
article与section
博客文章
Web开发
本文涉及AI创作
内容由AI创作，请仔细甄别
