Question

我正在尝试在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>代码的正确方法是什么？

Answer 1

答案在当前的规范中：

section元素表示文档的通用部分或   应用。在这方面，一节是一个主题分组   内容，通常带有标题。

部分的例子是章节，a中的各种标签页   选项卡式对话框，或论文的编号部分。一个网站的   主页可以分为几个部分，用于介绍，新闻   项目和联系信息。

鼓励作者使用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规范允许的文档中的任何位置使用，但不是必需的。

Answer 2

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

<section> ：用于将不同的文章分组到不同的目的或科目，或定义单篇文章的不同部分。

然后显示我清理过的an image：

enter image description here

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

<article>与<section>有关，但明显不同。   而<section>用于分组内容的不同部分或   功能<article>用于包含相关个人   独立的内容，例如个人博客文章，视频，   图像或新闻。可以这样想 - 如果你有一些   内容项目，每个项目都适合阅读他们的内容   拥有，并且在RSS中作为单独的项目联合是有意义的   饲料，然后<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>

Answer 3

我的理解是，SECTION持有一个带有标题的部分，该标题是页面“流程”的一个重要部分（不是一边）。部分将是章节，编号为文件的一部分等。

ARTICLE用于联合内容 - 例如帖子，新闻报道等。文章和章节是完全分开的 - 你可以拥有一个没有另一个，因为它们是非常不同的用例。

关于SECTION的另一个问题是，如果您的页面只有一个部分，则不应使用它。此外，每个部分必须有一个标题（H1-6，HGROUP，HEADING）。标题是“范围”与SECTION，所以例如如果您在主页面中使用H1（在SECTION之外），然后在该部分内使用H1，则后者将被视为H2。

the spec中的例子在编写时非常好。

所以在你的第一个例子中，如果你有几个内容的部分不能被描述为ARTICLEs，那将是正确的。（有一个小问题，你不需要#primary DIV，除非你想要一个样式钩子 - P标签会更好）。

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

不应将SECTION用作容器 - DIV仍然是正确使用的，以及您可能提出的任何其他自定义框。

Answer 4

您绝对可以将section标签用作容器。它是以比语言更重要的方式对内容进行分组，而不是使用div或html5规范说：

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

Answer 5

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

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

Answer 6

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

你可以检查一下： http://html5doctor.com/avoiding-common-html5-mistakes/

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

6 个答案: