article 元素：独立内容
使用 article 表示可独立分发的内容
article 元素：独立内容 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
什么是文章元素
<article> 元素表示自包含且可独立分发的内容：
- 脱离页面上下文后仍然具有完整意义
- 可以在不丢失含义的情况下进行内容联合发布（RSS、社交卡片）
何时使用文章元素
以下内容适合使用 <article>：
- 博客文章
- 新闻文章
- 论坛帖子
- 产品卡片
- 评论（每条独立评论都是一篇文章）
- 小部件或工具
文章结构
典型的文章包含页眉、内容和页脚：
<article>
<header>
<h2><a href="/posts/html-guide">HTML5 Complete Guide</a></h2>
<p>By <a rel="author" href="/authors/jane">Jane Smith</a></p>
<time datetime="2025-01-15">January 15, 2025</time>
</header>
<p>HTML5 brought many semantic improvements to the web...</p>
<footer>
<p>Tags: <a href="/tags/html">HTML</a>, <a href="/tags/web">Web</a></p>
</footer>
</article>嵌套文章（评论）
可以嵌套文章来表示回复或子内容：
<article class="post">
<h2>Main Post Title</h2>
<p>Post content...</p>
<section class="comments">
<h3>Comments</h3>
<article class="comment">
<p>Great post! — <cite>Alice</cite></p>
</article>
<article class="comment">
<p>Thanks for sharing! — <cite>Bob</cite></p>
</article>
</section>
</article>将产品卡片作为文章
产品卡片或内容卡片可以使用文章元素表示：
<ul class="product-grid">
<li>
<article class="product-card">
<img src="widget.jpg" alt="Widget Pro">
<h2>Widget Pro</h2>
<p>The best widget for professionals.</p>
<p>$49.99</p>
<a href="/products/widget-pro">View Product</a>
</article>
</li>
</ul>文章元素与分区元素
常见的混淆——文章元素与分区元素：
<article>—— 自包含；从页面中抽离出来后仍然具有完整意义<section>—— 按主题分组；需要周围的上下文才能理解
<!-- Article: can be shared standalone -->
<article>A blog post about HTML</article>
<!-- Section: a chapter of the post (not standalone) -->
<article>
<section><h2>Introduction</h2>...</section>
<section><h2>Deep Dive</h2>...</section>
</article>文章元素与 Schema.org
将文章与 Schema.org 结构化数据结合，以获得丰富的搜索结果：
<article>
<h1 id="title">HTML5 Guide</h1>
<time datetime="2025-01-15" id="date">Jan 15, 2025</time>
...
</article>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "HTML5 Guide",
"datePublished": "2025-01-15"
}
</script>cite 元素
使用 <cite> 表示作品标题或出处：
<article>
<h2>Book Review: <cite>Don't Make Me Think</cite></h2>
<p>By <a rel="author" href="/authors/me">Jane Smith</a></p>
<p>Steve Krug's book remains essential reading for UX designers...</p>
</article>链接中的作者关系
使用 rel="author" 标记文章中的作者链接：
<article>
<p>Written by
<a href="/authors/jane" rel="author">Jane Smith</a>
</p>
</article>
<!-- rel="author" helps search engines identify content authorship -->页面中的多篇文章
列表或信息流中可以包含多篇文章：
<main>
<h1>Latest Posts</h1>
<article>...</article>
<article>...</article>
<article>...</article>
</main>
<!-- Each article is independently consumable -->
<!-- This is correct: multiple articles, one main -->何时不使用文章元素
以下内容不应使用 <article>：
- 不具有独立含义的普通页面分区
- 导航元素
- 首页上的营销分区（请使用
<section>） - 侧边栏小部件（请使用
<aside>）
快速检查
适合放入文章元素的内容，其决定性特征是什么？
回顾：文章元素
文章元素的要点：
- 自包含且可独立分发的内容
- 可以在不丢失含义的情况下进行联合发布（RSS、社交预览）
- 示例：博客文章、新闻文章、产品卡片和评论
- 可以嵌套（带有嵌套评论文章的帖子）
- 在文章内部的作者链接上使用
rel="author"
常见问题解答
「article 元素：独立内容」课时是免费的吗？
是的 — 「article 元素：独立内容」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「article 元素：独立内容」这节课中我会学到什么？
使用 article 表示可独立分发的内容 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「article 元素：独立内容」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。