除了内容部分，一个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> 

参考资料：HTML5 与 CSS3 权威指南