<article> 或 <section> 标签之间的混淆。使用哪个？

Question

尽管阅读了有关<article> 和<section> 标签的页面，但我真的不明白如何将它们应用于我的网站。

我在页面末尾有一个包含相关产品的产品页面。首先我想到了做这样的事情：

<section>
   <header><h1>Product title</h1><header>
   <img src="image.jpg"/>
   <p>Description</p>
   <p>Price</p>
   <p><a href="...">Order</a></p>
</section>

<section>
  <header><h1>Related products</h1></header>
  <article>
    <a href="..."><img src="image1.jpg"><br/>Product 1</a><br/>Price
  </article>
  <article>
    <a href="..."><img src="image2.jpg"><br/>Product 2</a><br/>Price
  </article>
  <article>
    <a href="..."><img src="image3.jpg"><br/>Product 3</a><br/>Price
  </article>
</section>

但是，后来我阅读了一些其他博客，我突然想到，也许我应该用 <article> 标签替换 <section> 标签。

哪个是正确的，为什么？谢谢。

Answer 1

<article> 是一个独立的内容，即使它周围的所有内容都被剥离了，它也应该有意义。 <section> 更像是一个通用容器，与 div 标签非常相似，主要用于内容结构。所以正确的代码应该是这样的：

<article>
   <header><h1>Product title</h1><header>
   <img src="image.jpg"/>
   <p>Description</p>
   <p>Price</p>
   <p><a href="...">Order</a></p>
</article>

<article>
  <header><h1>Related products</h1></header>
  <section>
    <a href="..."><img src="image1.jpg"><br/>Product 1</a><br/>Price
  </section>
  <section>
    <a href="..."><img src="image2.jpg"><br/>Product 2</a><br/>Price
  </section>
  <section>
    <a href="..."><img src="image3.jpg"><br/>Product 3</a><br/>Price
  </section>
</article>

如果您在为自己的需要选择正确的 HTML5 语义元素感到困惑时，HTML 5 医生也有一个很棒的 Flowchart。您可以尝试一下，看看是否有帮助。

Answer 2

在 HTML5 标准中，<"article"> 元素定义了一个完整的、自包含的相关元素块。

<"section"> 元素被定义为相关元素的块。

我们可以使用定义来决定如何嵌套元素吗？不，我们不能！

在 Internet 上，您会发现带有包含 <"article"> 元素的 <"section"> 元素和包含 <"sections"> 元素的 <"article"> 元素的 HTML 页面。

您还可以找到包含<section> 元素的<"section"> 元素和包含<"article"> 元素的<article> 元素的页面。

来自：http://www.w3schools.com/html/html5_semantic_elements.asp

Answer 3

部分

section 元素表示文档或应用程序的通用部分。在这种情况下，部分是内容的主题分组。应确定每个部分的主题，通常通过包含标题（h1-h6 元素）作为部分元素的子元素。

文章

article 元素代表文档、页面、应用程序或站点中的完整或自包含的组合，原则上是可独立分发或可重复使用的，例如在辛迪加。这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、交互式小部件或小工具，或任何其他独立的内容项。

当文章元素嵌套时，内层文章元素代表原则上与外层文章内容相关的文章。例如，接受用户提交的 cmets 的网站上的博客条目可以将 cmets 表示为嵌套在博客条目的 article 元素中的文章元素。

直接来自 W3 http://www.w3.org/html/wg/drafts/html/master/sections.html

---

在他们的示例中，他们有一个 article 嵌套在 section 内的 article 内。我会说你肯定用对了。

<article>
 <header></header>
 <section>
  <h1></h1>
  <article></article>
  <article></article>
 </section>
</article>