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

我试图在HTML5中构build一个布局，阅读了几篇不同的文章后，我只是感到困惑。 我试图得到一些关于如何使用它的input。

以下是我正在来回的变化：

1）

<section id="content"> <h1>Heading</h1> <div id="primary"> Some text goes here... </div> </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元素表示文档或应用程序的通用部分。 在这种情况下，部分是内容的主题分组，通常带有标题。

部分的例子可以是章节，标签对话框中的各种标签页或者论文的编号部分。 一个网站的主页可以分成几个部分介绍，新闻和联系信息。

鼓励作者使用article元素而不是section元素，以便合并元素的内容 。

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

在关于构buildHTML5的W3维基页面中 ，它说：

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

然后显示我清理的图像 ：

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

<article>与<section> ，但明显不同。 鉴于<section>是用于对不同部分的内容或function进行分组， <article>用于包含相关的单独独立内容片段，例如单个博客post，video，图片或新闻项目。 这样想 – 如果你有一些内容项目，每一项内容都适合自己阅读，并且在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> 

Answer 3

你肯定可以用section标签作为容器。 它是在那里用一个更多的语义重要的方式，而不是一个div或html5规范说：

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

Answer 4

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

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

Answer 5

我的理解是SECTION拥有一个标题的部分，这是页面“stream动”的重要部分（不是旁边）。 部分将是章节，文件的编号部分等等。

ARTICLE是用于联合内容 – 例如post，新闻报道等。ARTICLE和SECTION是完全独立的 – 你可以有一个没有另一个，因为它们是非常不同的用例。

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

规范中的例子在编写时相当不错。

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

第二个例子是正确的，如果你删除所有SECTION标签 – 该文件中的数据将是文章，post或类似的东西。

SECTIONs不应该被用作容器 – DIV仍然是正确的用法，还有你可能想出的任何其他定制盒子。

Answer 6

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

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