html5 article 语义解释

先引用w3c官方文档解释：

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

神马意思呢，翻译下：

article 元素代表页面的一个组成部分，包括一篇文档，页面，应用，或者站点。它们应当是独立的或者可重复使用的。比如，论坛发帖，杂志或报纸上的文章，博客条目，用户提交的评论，交互组件或者其他独立的内容。

从以上的字面意思上来看，重复强调的是"独立"。那么如何理解"独立"呢？

"独立"语义嗅探：

适合放在article元素中的独立的内容，它本身就应当有独立的意义。这取决于你的理解，但是把它放在RSS feed中进行测试岂不是更方便吗？当然了，博客文章以及从不更新的文章适合放在 feed中，一些站点本身也拥有博客评论feeds。

另一方面，feed中把article里每个段落进行分发意义不大。关键在于，该内容本身独立于上下文，即便是周围所有的内容被移掉。

示例：

一个赤裸的article：

<article>
        <h1>Apple</h1>
        <p>The <b>apple</b> is the pomaceous fruit of the apple tree...</p>
        ...
</article>

尽管只有标题和描述，但是足够"独立"。

一个博客风格的article：

<article>
  <header>
    <h1>Apple</h1>
    <p>Published: <time pubdate="pubdate">2009-10-09</time></p>
  </header>
  <p>The <b>apple</b> is the pomaceous fruit of the apple tree...</p>
  ...
  <footer>
    <p><small>Creative Commons Attribution-ShareAlike License</small></p>
  </footer>
</article>

这个示例基于原来的文档，添加了发布日期和底部的其它描述。

带有评论的article :

<article>
  <header>
    <h1>Apple</h1>
    <p>Published: <time pubdate datetime="2009-10-09">9th October, 2009</time></p>
  </header>
  <p>The <b>apple</b> is the pomaceous fruit of the apple tree...</p>
  ...
  
  <section>
    <h2>Comments</h2>
    <article>
      <header>
      <h3>Posted by: Apple Lover</h3>
      <p><time pubdate datetime="2009-10-10T19:10-08:00">~1 hour ago</time></p>
    </header>
    <p>I love apples, my favourite kind are Granny Smiths</p>
    </article>
    
    <article>
      <header>
        <h3>Posted by: Oranges are king</h3>
        <p><time pubdate datetime="2009-10-10T19:15-08:00">~1 hour ago</time></p>
      </header>
      <p>Urgh, apples!? you should write about ORANGES instead!!1!</p>
    </article>
  </section>
</article>

其中的评论就适合使用article标签包含起来。

article包含section :

<article>
  <h1>Apple varieties</h1>
  <p>The apple is the pomaceous fruit of the apple tree...</p>

  <section>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many supermarkets...</p>
  </section>

  <section>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for apple pies...</p>
  </section>
    
</article>

section包含article：

<section>
  <h1>Articles on: Fruit</h1>

  <article>
    <h2>Apple</h2>
    <p>The apple is the pomaceous fruit of the apple tree...</p>
  </article>

  <article>
    <h2>Orange</h2>
    <p>The orange is a hybrid of ancient cultivated origin, possibly between pomelo and tangerine...</p>
  </article>

  <article>
    <h2>Banana</h2>
    <p>Bananas come in a variety of sizes and colors when ripe, including yellow, purple, and red...</p>
  </article>
    
</section>

使用article包含一个组件：

<article>
  <h1>My Fruit Spinner</h1>
  <object>
    <param name="allowFullScreen" value="true">
    <embed src="#" width="600" height="395"></embed>
  </object>
</article>

article和section的区别：

article是section的特例。你可以使用section替代article，但是你不能使用article替代section。

在使用这两者以及div标签时，你可以按如下步骤进行考虑：

1.放在rss feed中语义是否独立完整，是，用article；

2.如果该内容上下文相关，考虑使用section；

3.仅仅是个块内容，使用div。

译自：http://html5doctor.com/the-article-element/，有删减。

另外扩展阅读请参考：http://www.yiiyaa.net/1457