3.1.1 article元素
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。
除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。
现在，让我们以博客为例来看一段关于article元素的代码示例，如代码清单3-1所示。
代码清单3-1 article元素示例
<article>
<header>
<h1>苹果</h1>
<p>发表日期： <time pubdate="pubdate">2010/10/09</time></p>
</header>
<p><b>苹果</b> ,植物类水果，多次花果…（"苹果"文章正文）</p>
<footer>
<p><small>著作权归***公司所有。</small></p>
</footer>
</article>
这个示例是一篇讲述苹果的博客文章，在header元素中嵌入了文章的标题部分，在这部分中，文章的标题"苹果"被镶嵌在h1元素中，文章的发表日期镶嵌在p元素中。在标题下部的p元素中，嵌入了一大段该博客文章的正文，在结尾处的footer元素中，嵌入了文章的著作权，作为脚注。整个示例的内容相对比较独立、完整，因此，对这部分内容使用了article元素。
article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式；用来呈现评论的article元素被包含在表示整体内容的article元素里面。
接着，让我们来看一个关于article元素嵌套的代码示例，如代码清单3-2所示。
代码清单3-2 article元素嵌套示例
<article>
<header>
<h1>苹果</h1>
<p>发表日期：
<time pubdate datetime="2010/10/09">2010/10/09</time>
</p>
</header>
<p><b>苹果</b> ,植物类水果，多次花果…（"苹果"文章正文）</p>
<section>
<h2>评论</h2>
<article>
<header>
<h3>发表者：陆凌牛</h3>
<p>
<time pubdate datetime="2010-10-10T19:10-08:00">
1小时前
</time>
</p>
</header>
<p>我喜欢苹果，我最喜爱的品种是红富士。</p>
</article>
<article>
<header>
<h3>发表者：张玉</h3>
<p>
<time pubdate datetime="2010-10-10T19:15-08:00">
1小时前
</time>
</p>
</header>
<p>苹果？我不喜欢，我喜欢吃橘子。</p>
</article>
</section>
</article>
这个示例中的内容比代码清单3-1中的内容更加完整了，它添加了文章读者的评论内容，示例的整体内容还是比较独立、完整的，因此对其使用article元素。具体来说，示例内容又分为几部分，文章标题放在了header元素中，文章正文放在了header元素后面的p元素中，然后section元素把正文与评论部分进行了区分（section元素马上就要讲到，是一个分块元素，用来把页面中的内容进行分块），在section元素中嵌入了评论的内容，评论中每一个人的评论相对来说又是比较独立、完整的，因此对它们都使用一个article元素，在评论的article元素中，又可以分为标题与评论内容部分，分别放在header元素与p元素中。
关于示例中提到的time元素与pubdate属性，请查看本节结尾处有关time元素与pubdate属性的说明。
另外，article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。代码清单3-3是它的一个示例。
代码清单3-3 用article元素表示插件
<article>
<h1>My Fruit Spinner</h1>
<object>
<param name="allowFullScreen" value="true">
<embed src="#" width="600" height="395"></embed>
</object>
</article>
相关HTML 5与CSS 3权威指南：article元素