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

我试图用HTML5构建布局，阅读了几篇不同的文章后，我感到很困惑。我正在尝试获取有关应如何使用的信息。

以下是我来回变化的版本：

1）

<section id="content">
      <h1>Heading</h1>
      <div id="primary">
         Some text goes here...
      </div>
   </section>

您可以使用section标签来充当容器吗？

2）

 <div id="content">
      <h1>Heading</h1>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
   </div>

使用<section>标签的正确方法是什么？

答案是在当前规范中：

section元素代表文档或应用程序的通用部分。在这种情况下，一节是内容的主题分组，通常带有标题。

部分的示例包括章节，选项卡式对话框中的各个选项卡式页面或论文的编号部分。网站的主页可以分为几个部分，以进行介绍，新闻和联系信息。

鼓励作者联合使用该元素的内容时，可以使用article元素而不是section元素。

的部分元素不是一个通用的容器元素。当出于样式目的或为了方便编写脚本而需要某个元素时，鼓励作者改用div元素。一般规则是，仅当节的内容在文档的大纲中明确列出时，section元素才适用。

参考：

• 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规范允许的文档中的任何地方使用，但这不是必需的。

在有关构造HTML5的W3 Wiki页面中，它说：

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

然后显示我清理的图像：

知道如何使用<article>标记也很重要（来自上面相同的W3链接）：

<article>与相关<section>，但有明显不同。而<section>用于对内容或功能的不同部分进行分组，<article>则用于包含相关的独立内容，例如独立的博客文章，视频，图像或新闻项目。可以这样考虑-如果您有很多内容项，每个内容项都适合自己阅读，并且可以在RSS feed中作为单独的项进行联合，那么<article>就适合对其进行标记。

在我们的示例中，<section id="main">包含博客条目。每个博客条目都适合作为RSS提要中的项目进行联合，并且在上下文无关的情况下单独阅读时很有意义，因此 <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>

我的理解是，SECTION包含一个带有标题的部分，该部分是页面“流程”的重要组成部分（而不是旁边）。部分将是章节，文档的编号部分等等。

ARTICLE用于联合发布的内容，例如帖子，新闻故事等。ARTICLE和SECTION是完全独立的，因为它们是非常不同的用例，因此可以不使用另一个。

关于SECTION的另一件事是，如果页面只有一个部分，则不应使用它。另外，每个部分都必须具有标题（H1-6，HGROUP，HEADING）。标题与SECTION一起“作用域”，因此，例如，如果您在主页（SECTION之外）中使用H1，然后在该节中使用H1，则后者将被视为H2。

撰写本文时，规范中的示例非常好。

因此，在第一个示例中，如果您有几部分内容不能被描述为“文章”，那将是正确的。（有一点要注意，除非您希望将其用作样式挂钩，否则不需要#primary DIV-P标签会更好）。

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

不应将SECTION用作容器-DIV仍然是正确的用法，您可能会想到其他任何自定义框。

您绝对可以将section标记用作容器。它可以用比div或html5规范所说的语义更有意义的方式对内容进行分组：

section元素代表文档或应用程序的通用部分。在这种情况下，一节是内容的主题分组，通常带有标题。 http://www.w3.org/TR/html5/sections.html#the-section-element

正确的方法是＃2。您使用了section标签来定义文档的一部分。根据规范http://www.w3.org/TR/html5/sections.html：

section元素不是通用容器元素。当出于样式目的或为了方便编写脚本而需要某个元素时，鼓励作者改用div元素

那是错误的：不是包装器。元素表示内容的语义部分，以帮助构造文档大纲。它应该包含一个标题。如果您正在寻找页面包装器元素（适用于HTML或XHTML的任何一种样式），请考虑按照Kroc Camen所述将样式直接应用于元素。如果仍然需要其他样式元素，请使用。正如Mike博士所解释的，div还没有死，如果没有其他更合适的方法，它可能就是您真正想要应用CSS的地方。

您可以检查以下内容：http : //html5doctor.com/avoiding-common-html5-mistakes/