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

Question

我只是混淆了如何在HTML5中使用<article>和<section>标记.

我在Google和Stack Overflow网站上引用了很多.

在那,我发现HTML5页面<section>包含<article>元素和<article>包含<sections>元素的元素.

我还发现了<section>包含<section>元素的元素和<article>包含<article>元素的元素.

这些标签的确切用途是什么？

Answer 1

这取决于你的内容.

例如,最近的博客帖子列表可能section包含多个article(示例1),复杂的博客帖子可能article包含多个section(示例2),带有注释的博客文章可以是article带有section几个article(示例3).

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

1. 如果您需要切片内容元素,请从section.
2. 检查内容是否与定义nav匹配.如果是,请使用nav,否则:
3. 检查内容是否与定义aside匹配.如果是,请使用aside,否则:
4. 检查内容是否与定义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:包含评论的博客文章

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