您现在的位置是：网站首页 > <article>-独立内容块文章详情
<article>-独立内容块
陈川
【
HTML
】
10399人已围观
11629字
<article> 是 HTML5 中引入的语义化标签，用于标识页面中独立、完整的内容块。它通常代表一个可以独立分发或复用的内容单元，比如论坛帖子、新闻文章、博客条目或用户评论等。
<article> 的基本用法
<article> 标签的语法非常简单，只需将内容包裹在开始和结束标签之间即可：
<article>
<h2>文章标题</h2>
<p>这里是文章的主要内容...</p>
</article>
这个标签的主要作用是帮助浏览器和搜索引擎理解页面结构，同时提高可访问性。屏幕阅读器等辅助技术可以通过这些语义化标签更好地导航页面内容。
<article> 的典型应用场景
博客文章
在博客平台中，每篇独立的文章都可以用 <article> 标签包裹：
<article class="blog-post">
<header>
<h2>如何学习HTML5</h2>
<p class="post-meta">作者：张三 | 发布日期：2023-05-15</p>
</header>
<div class="post-content">
<p>HTML5是最新的HTML标准，它引入了许多新特性...</p>
<!-- 更多内容 -->
</div>
<footer>
<p class="post-tags">标签：HTML, 前端开发</p>
</footer>
</article>
新闻条目
新闻网站中的每条新闻也可以使用 <article>：
<article class="news-item">
<h2>某公司发布最新产品</h2>
<p class="news-date">2023-05-10</p>
<img src="product.jpg" alt="新产品图片">
<p>该公司今日发布了其旗舰产品的最新版本...</p>
</article>
论坛帖子
论坛中的每个帖子都是独立的内容单元：
<article class="forum-post">
<header>
<h3>关于CSS布局的问题</h3>
<p>发帖人：李四 | 发布时间：今天 14:30</p>
</header>
<p>我在使用Flexbox布局时遇到了一个问题...</p>
<footer>
<button>回复</button>
<button>点赞</button>
</footer>
</article>
<article> 的嵌套使用
<article> 标签可以嵌套使用，这在评论系统中很常见：
<article class="main-post">
<h2>讨论：前端框架的未来</h2>
<p>随着Web技术的发展，前端框架的选择越来越多...</p>
<section class="comments">
<h3>评论</h3>
<article class="comment">
<h4>王五说：</h4>
<p>我认为React仍然是目前最好的选择...</p>
</article>
<article class="comment">
<h4>赵六说：</h4>
<p>Vue3的组合式API改变了游戏规则...</p>
</article>
</section>
</article>
<article> 与其他语义化标签的关系
与 <section> 的区别
<section> 用于对内容进行分组，而 <article> 用于标识独立的内容块。一个 <article> 可以包含多个 <section>，反之亦然：
<article>
<h2>JavaScript高级技巧</h2>
<section>
<h3>闭包的应用</h3>
<p>闭包是JavaScript中一个强大的概念...</p>
</section>
<section>
<h3>原型链详解</h3>
<p>理解原型链是掌握JavaScript的关键...</p>
</section>
</article>
与 <div> 的区别
<div> 是一个通用的容器，没有语义含义。而 <article> 具有明确的语义，表示独立的内容单元：
<!-- 不推荐的做法 -->
<div class="post">
<h2>文章标题</h2>
<p>文章内容...</p>
</div>
<!-- 推荐的做法 -->
<article class="post">
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
<article> 的样式处理
虽然 <article> 是语义化标签，但它可以像其他HTML元素一样应用CSS样式：
article {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
article header {
border-bottom: 1px solid #eee;
margin-bottom: 15px;
padding-bottom: 10px;
}
article footer {
border-top: 1px solid #eee;
margin-top: 15px;
padding-top: 10px;
font-size: 0.9em;
color: #666;
}
<article> 的可访问性考虑
使用 <article> 可以提升网站的可访问性。屏幕阅读器用户可以通过这些语义化标签更轻松地导航内容。为了进一步增强可访问性，可以添加ARIA属性：
<article aria-labelledby="article1-title" aria-describedby="article1-desc">
<h2 id="article1-title">无障碍网页设计</h2>
<p id="article1-desc">本文介绍如何创建对所有人都友好的网页...</p>
<!-- 更多内容 -->
</article>
<article> 在单页应用中的使用
在单页应用(SPA)中，<article> 可以用于动态加载的内容块：
// 动态添加文章内容
function loadArticle(id) {
fetch(`/api/articles/${id}`)
.then(response => response.json())
.then(data => {
const articleContainer = document.getElementById('article-container');
articleContainer.innerHTML = `
<article>
<h2>${data.title}</h2>
<p>${data.content}</p>
<footer>作者：${data.author}</footer>
</article>
`;
});
}
<article> 的SEO优势
搜索引擎会给予语义化标签更多的权重。正确使用 <article> 可以帮助搜索引擎理解内容结构，可能提高搜索排名：
<article itemscope itemtype="http://schema.org/Article">
<h2 itemprop="headline">HTML5语义化标签指南</h2>
<p itemprop="description">本文详细介绍HTML5的各种语义化标签...</p>
<div itemprop="articleBody">
<!-- 文章正文内容 -->
</div>
<footer>
<span itemprop="author">张三</span>
<time itemprop="datePublished" datetime="2023-05-01">2023年5月1日</time>
</footer>
</article>
<article> 的浏览器支持
<article> 标签在所有现代浏览器中都得到良好支持，包括：
- Chrome 5+
- Firefox 4+
- Safari 5+
- Opera 11.1+
- Edge 12+
- Internet Explorer 9+
对于不支持HTML5的旧浏览器，可以通过以下CSS确保样式一致：
article {
display: block;
}
<article> 的实际案例
电子商务网站的产品评价
<article class="product-review">
<header>
<h3>优质产品</h3>
<div class="rating" aria-label="评分：5星">★★★★★</div>
<p class="reviewer">来自：满意的客户</p>
<time datetime="2023-04-15">2023年4月15日</time>
</header>
<p>这个产品超出了我的预期，质量非常好...</p>
<footer>
<button>有帮助(32)</button>
<button>举报</button>
</footer>
</article>
技术文档的章节
<article id="array-methods">
<h2>JavaScript数组方法</h2>
<section>
<h3>map()方法</h3>
<p><code>map()</code>方法创建一个新数组...</p>
<pre><code>const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2);
// doubled现在是[2, 4, 6]</code></pre>
</section>
<section>
<h3>filter()方法</h3>
<p><code>filter()</code>方法创建一个新数组...</p>
</section>
</article>
<article> 的最佳实践
-
独立性原则：确保
<article>中的内容可以独立于页面其他部分存在并保持意义。 -
标题的必要性：每个
<article>应该有一个标题（通常是<h1>-<h6>），这有助于可访问性和SEO。 -
结构化内容：在
<article>内部使用适当的语义化标签（如<header>,<footer>,<section>等）来组织内容。 -
避免过度使用：不是所有内容块都需要
<article>，只有当内容确实独立且有价值时才使用。 -
微数据标记：考虑使用Schema.org微数据或JSON-LD来增强搜索引擎对内容的理解。
<article> 的进阶用法
与Web组件的结合
在Web组件中，<article> 可以作为自定义元素的内容容器：
<script>
class NewsArticle extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
article {
border: 1px solid #ccc;
padding: 1em;
margin: 1em 0;
}
</style>
<article>
<slot name="title"><h2>默认标题</h2></slot>
<slot name="content"><p>默认内容...</p></slot>
</article>
`;
}
}
customElements.define('news-article', NewsArticle);
</script>
<news-article>
<h2 slot="title">重大科技突破</h2>
<div slot="content">
<p>科学家们宣布了一项可能改变世界的发现...</p>
</div>
</news-article>
在CMS系统中的使用
内容管理系统(CMS)可以自动为每篇内容生成 <article> 结构：
<?php foreach ($posts as $post): ?>
<article id="post-<?php echo $post->ID; ?>">
<h2><?php echo $post->title; ?></h2>
<div class="post-content">
<?php echo $post->content; ?>
</div>
<footer>
<span class="post-date"><?php echo $post->date; ?></span>
<span class="post-author">作者：<?php echo $post->author; ?></span>
</footer>
</article>
<?php endforeach; ?>
<article> 的常见错误用法
错误1：滥用为通用容器
<!-- 错误：导航不是独立内容 -->
<article>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</article>
错误2：缺少标题
<!-- 不推荐：article没有标题 -->
<article>
<p>这是一些内容...</p>
<p>更多内容...</p>
</article>
错误3：过度嵌套
<!-- 不推荐：不必要的嵌套 -->
<article>
<article>
<h2>内部文章</h2>
<p>内容...</p>
</article>
</article>
<article> 与RSS/Atom订阅
许多RSS阅读器会识别网页中的 <article> 标签来提取内容：
<!-- RSS阅读器可能会提取这些article作为订阅项 -->
<div class="blog-feed">
<article>
<h2><a href="post1.html">第一篇博客</a></h2>
<p>摘要内容...</p>
</article>
<article>
<h2><a href="post2.html">第二篇博客</a></h2>
<p>摘要内容...</p>
</article>
</div>
<article> 在响应式设计中的应用
结合CSS媒体查询，<article> 可以创建适应不同屏幕尺寸的布局：
/* 小屏幕：单列布局 */
article {
width: 100%;
margin: 10px 0;
}
/* 中等屏幕：两列布局 */
@media (min-width: 600px) {
.article-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
}
/* 大屏幕：三列布局 */
@media (min-width: 900px) {
.article-grid {
grid-template-columns: 1fr 1fr 1fr;
}
}
<article> 与打印样式
可以专门为打印设计 <article> 的样式：
@media print {
article {
page-break-inside: avoid;
break-inside: avoid;
}
article header {
border-bottom: 2px solid #000;
}
article footer {
border-top: 1px solid #000;
font-size: 10pt;
}
}
<article> 的JavaScript交互
可以通过JavaScript为 <article> 添加交互功能：
// 为所有文章添加点击事件
document.querySelectorAll('article').forEach(article => {
article.addEventListener('click', function() {
this.classList.toggle('expanded');
});
});
// 动态加载更多文章
const loadMoreButton = document.getElementById('load-more');
loadMoreButton.addEventListener('click', async () => {
const response = await fetch('/api/more-articles');
const articles = await response.json();
const container = document.querySelector('.articles-container');
articles.forEach(articleData => {
const article = document.createElement('article');
article.innerHTML = `
<h2>${articleData.title}</h2>
<p>${articleData.excerpt}</p>
<a href="${articleData.url}">阅读更多</a>
`;
container.appendChild(article);
});
});
<article> 在Web组件框架中的使用
在现代前端框架中，<article> 仍然有其用武之地：
React 示例
function ArticleList({ articles }) {
return (
<div className="article-list">
{articles.map(article => (
<article key={article.id} className="article-card">
<h2>{article.title}</h2>
<p>{article.summary}</p>
<footer>
<span>作者：{article.author}</span>
<time dateTime={article.publishedAt}>{article.publishedAt}</time>
</footer>
</article>
))}
</div>
);
}
Vue 示例
<template>
<div class="article-container">
<article v-for="article in articles" :key="article.id" class="article-item">
<h2>{{ article.title }}</h2>
<p>{{ article.content }}</p>
<footer>
<span>发布于：{{ formatDate(article.publishedAt) }}</span>
</footer>
</article>
</div>
</template>
<article> 与Web性能优化
合理使用 <article> 可以配合懒加载技术提升页面性能：
<article class="lazy-load" data-src="article1.html">
<h2>文章标题</h2>
<div class="loading-spinner"></div>
</article>
<script>
// 懒加载文章内容
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const article = entry.target;
fetch(article.dataset.src)
.then(response => response.text())
.then(html => {
article.innerHTML = html;
article.classList.remove('lazy-load');
});
observer.unobserve(article);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.lazy-load').forEach(article => {
observer.observe(article);
});
</script>
<article> 与渐进式Web应用(PWA)
在PWA中，<article> 内容可以被缓存以实现离线阅读：
// Service Worker中缓存文章内容
self.addEventListener('fetch', event => {
if (event.request.url.includes('/articles/')) {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request).then(fetchResponse => {
return caches.open('articles-cache').then(cache => {
cache.put(event.request, fetchResponse.clone());
return fetchResponse;
});
});
})
);
}
});
<article> 的可访问性增强
为了进一步提升可访问性，可以添加更多ARIA属性和键盘导航支持：
<article aria-labelledby="article-title" tabindex="0" class="focusable-article">
<h2 id="article-title">可访问性设计指南</h2>
<p>本文介绍如何创建对所有人都友好的网页界面...</p>
</article>
<style>
.focusable-article:focus {
outline: 3px solid #0066cc;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
</style>
<script>
// 为文章添加键盘交互
document.querySelectorAll('article').forEach(article => {
article.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
// 展开/折叠文章内容
article.classList.toggle('expanded');
}
});
});
</script>
上一篇： <main>-文档主要内容
下一篇： <section>-文档章节
