Question

我很困惑如何在HTML5中使用<article>和<section>标记。

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

在此基础上，我发现HTML5页面包含<section>元素，其中包含<article>元素，<article>元素包含<sections>个元素。

我还发现包含<section>个元素的网页包含<section>元素，<article>个元素包含<article>个元素。

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

Answer 1

这取决于您的内容。

例如，最近的博客帖子列表可能是包含多个section的{{1}}（示例1），复杂的博客帖子可能是article，其中包含多个article （示例2），包含评论的博客文章可以是section，article和多个section（示例3）。

如何决定何时使用哪个？易：

如果您需要切片内容元素，请从article开始。
检查内容是否与definition of nav匹配。如果是，请使用section，否则：
检查内容是否与definition of aside匹配。如果是，请使用nav，否则：
检查内容是否与definition of article匹配。如果是，请使用aside，否则：
留在article。

示例1：博客帖子列表

section

示例2：复杂的博客文章

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

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

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

</section>

示例3：包含评论的博客文章

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

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

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

</article>

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

1 个答案: