如何在 HTML5 中使用 <section> 和 <article> 标签？

Question

我只是对如何在 HTML5 中使用 <article> 和 <section> 标记感到困惑。

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

在这方面，我发现了 HTML5 页面，其中 <section> 元素包含 <article> 元素，<article> 元素包含 <sections> 元素。

我还发现了包含 <section> 元素的 <section> 元素和包含 <article> 元素的 <article> 元素的页面。

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

Answer 1

这取决于你的内容。

例如，最近的博客帖子列表可以是包含多个 article 的 section（示例 1），复杂的博客帖子可以是带有多个 section 的 article（示例 2），博客带有 cmets 的帖子可以是一个 article 和一个 section 和几个 article（示例 3）。

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

1. 如果您需要分段内容元素，请以 section 开头。
2. 检查内容是否与definition of nav 匹配。如果是，请使用nav，否则：
3. 检查内容是否与definition of aside 匹配。如果是，请使用aside，否则：
4. 检查内容是否与definition of article 匹配。如果是，请使用article，否则：
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：使用 cmets 的博客文章

<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>