如何在 HTML5 中使用

和

标签？

我只是困惑如何使用<article> and <section>HTML5 中的标签。

我在 Google 和 Stack Overflow 网站上引用了很多内容。

对此，我发现 HTML5 页面带有<section>元素包含<article>元素，以及<article>元素包含<sections>元素。

我还找到了带有<section>元素包含<section>元素，以及<article>元素包含<article>元素。

这些标签的具体用途是什么？

这取决于你的内容。

例如，最近博客文章的列表可以是section包含几个article（示例 1），一篇复杂的博客文章可能是article与几个section（示例 2），带有评论的博客文章可以是article with a section和几个article（示例 3）。

如何决定何时使用哪个？简单的：

1. 如果您需要分段内容元素，请从section.
2. 检查内容是否匹配的定义nav http://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element。如果是，请与nav, else:
3. 检查内容是否匹配的定义aside http://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-aside-element。如果是，请与aside, else:
4. 检查内容是否匹配的定义article http://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-article-element。如果是，请与article, else:
5. 留下来section.

示例 1：博客文章列表

<section>
  <h2>Recent blog posts</h2>

  <article>
    <h3>Blog post 1</h3>
  </article>

  <article>
    <h3>Blog post 2</h3>
  </article>

</section>

示例 2：复杂的博客文章

<article>
  <h2>Blog post 1</h2>

  <section>
    <h3>So, this is what happened</h3>
  </section>

  <section>
    <h3>What the others said</h3>
  </section>

</article>

示例 3：带有评论的博客文章

<article>
  <h2>Blog post 2</h2>

  <section>
    <h3>Comments</h3>

    <article>
      <p>First!</p>
    </article> 

    <article>
      <p>First! <ins>Edit: Second :(</ins></p>
    </article>        

  </section>

</article>