问如何在HTML5中正确使用"section“标签？

EN

答案就在当前的规范中：

部分元素表示文档或应用程序的通用部分。在此上下文中，节是内容的主题分组，通常带有标题。

章节的例子可以是章节、选项卡式对话框中的各种选项卡式页面或论文的编号章节。网站的主页可以分为介绍、新闻条目和联系信息等部分。

如果将元素的内容联合起来更有意义，则鼓励作者使用元素而不是元素。

节元素不是通用容器元素。当需要某个元素来设置样式或方便编写脚本时，鼓励作者改用div元素。一般规则是，只有当元素的内容在文档的大纲中显式列出时，元素才适用。

参考资料：

• http://www.w3.org/TR/html5/sections.html#the-section-element
• http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

另请参阅：

• http://html5doctor.com/the-section-element/
• http://www.impressivewebs.com/html5-section/

这个元素的用途似乎有很多混淆之处，但有一点是一致同意的，那就是它是，而不是像<div>那样的泛型包装器。它应该用于语义目的，而不是CSS或JavaScript挂钩(尽管它当然可以是样式或“脚本化”)。

根据我的理解，一个更好的例子可能是这样的：

<div id="content">
  <article>
     <h2>How to use the section tag</h2>
     <section id="disclaimer">
         <h3>Disclaimer</h3>
         <p>Don't take my word for it...</p>
     </section>
     <section id="examples">
       <h3>Examples</h3>
       <p>But here's how I would do it...</p>
     </section>
     <section id="closing_notes">
       <h3>Closing Notes</h3>
       <p>Well that was fun. I wonder if the spec will change next week?</p>
     </section>
  </article>
</div>

请注意，<div>是完全非语义的，可以在HTML规范允许的文档中的任何地方使用，但不是必需的。

在W3 wiki page about structuring HTML5中，它说：

<section>：用于将不同的文章分组到不同的目的或主题中，或者定义单个文章的不同部分。

a用于将不同的文章分为不同的目的或主题，或者定义单个文章的不同部分。

然后显示我清理的an image：

​

​

了解如何使用<article>标记(来自上面的相同W3链接)也很重要：

<article>与<section>相关，但又截然不同。<section>用于对内容或功能的不同部分进行分组，而<article>用于包含相关的独立内容片段，例如单个博客帖子、视频、图像或新闻项目。这样想一想--如果你有一系列的内容，每一项都适合自己阅读，并且在RSS feed中联合成单独的项是有意义的，那么<article>就适合标记它们。

在我们的示例中，<section id="main">包含博客条目。每个博客条目都适合作为RSS feed中的一个项目，并且在独立阅读时也很有意义，因此<article>非常适合它们：

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

很简单，是吧？但请注意，您也可以在文章中嵌套部分，这样做是有意义的。例如，如果这些博客文章中的每一篇都有一致的不同部分的结构，那么您也可以在文章中放置部分。它可能看起来像这样：

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

我的理解是，部分包含一个标题的部分，这是页面“流”的重要部分(而不是旁注)。章节可以是章节、文档的编号部分等等。

文章是针对辛迪加内容的--例如帖子，新闻故事等。文章和版块是完全分开的--你可以有一个而不是另一个，因为它们是非常不同的用例。

关于节的另一件事是，如果你的页面只有一个节，你就不应该使用它。此外，每个部分必须有一个标题(H1-6，HGROUP，标题)。标题与节一起“限定范围”，因此，例如，如果您在主页(节外)中使用H1，然后在节中使用H1，则后者将被视为H2。

在编写本文时，the spec中的示例已经相当不错了。

因此，在您的第一个示例中，如果您有几个不能被描述为文章的内容部分，那么将是正确的。(有一个小问题，你不需要#primary DIV，除非你想把它作为一个样式钩子--P标签会更好)。

如果您删除了所有的节标记，那么第二个示例将是正确的--该文档中的数据将是文章、帖子或类似的内容。

节不应该用作容器-- DIV仍然是它的正确用法，以及您可能想出的任何其他定制框。