html - 或 标签之间的混淆。使用哪个？

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>

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

哪个是对的，为什么？谢谢。

Answer 1

部分

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.

文章

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

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

---

在他们的示例中，他们有一个 article 嵌套在 article 的 section 中。我会说你肯定在正确使用它。

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