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

How to correctly use "section" tag in HTML5?

提问by Andrew Sawa

I'm trying to build a layout in HTML5 and after reading several different articles I'm just confused. I'm trying to get some input on how it should be used.

我正在尝试在 HTML5 中构建布局，在阅读了几篇不同的文章后，我感到很困惑。我正在尝试就如何使用它获得一些意见。

Below is the variations I'm going back and forth with:

以下是我要来回的变化：

1)

1)

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

Can you use the section tag to act like a container?

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

2)

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>

What is the correct method to use the <section>tag?

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

回答by Wesley Murch

The answer is in the current spec:

答案在当前规范中：

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

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

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

当联合元素的内容有意义时，鼓励作者使用 article 元素而不是 section 元素。

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

Reference:

参考：

• 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://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

Also see:

另见：

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

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

It looks like there's been a lot of confusion about this element's purpose, but the one thing that's agreed upon is that it is nota generic wrapper, like <div>is. It should be used for semantic purposes, and not a CSS or JavaScript hook (although it certainly canbe styled or "scripted").

看起来这个元素的目的有很多混淆，但一致同意的一件事是它不是一个通用的包装器，就像<div>是。它应该用于语义目的，而不是 CSS 或 JavaScript 钩子（尽管它当然可以设置样式或“脚本化”）。

A better example, from my understanding, might look something like this:

根据我的理解，一个更好的例子可能如下所示：

<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>

Note that <div>, being completely non-semantic, can be used anywhere in the document that the HTML spec allows it, but is not necessary.

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

回答by Justin

In the W3 wiki page about structuring HTML5, it says:

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

<section>: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.

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

And then displays an imagethat I cleaned up:

然后显示我清理过的图像：

It's also important to know how to use the <article>tag (from the same W3 link above):

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

<article>is related to <section>, but is distinctly different. Whereas <section>is for grouping distinct sections of content or functionality, <article>is for containing related individual standalone pieces of content, such as individual blog posts, videos, images or news items. Think of it this way - if you have a number of items of content, each of which would be suitable for reading on their own, and would make sense to syndicate as separate items in an RSS feed, then <article>is suitable for marking them up.

In our example, <section id="main">contains blog entries. Each blog entry would be suitable for syndicating as an item in an RSS feed, and would make sense when read on its own, out of context, therefore <article>is perfect for them:

<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>

Simple huh? Be aware though that you can also nest sections inside articles, where it makes sense to do so. For example, if each one of these blog posts has a consistent structure of distinct sections, then you could put sections inside your articles as well. It could look something like this:

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

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

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

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

回答by GG00

My understanding is that SECTION holds a section with a heading which is an important part of the "flow" of the page (not an aside). SECTIONs would be chapters, numbered parts of documents and so on.

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

ARTICLE is for syndicated content -- e.g. posts, news stories etc. ARTICLE and SECTION are completely separate -- you can have one without the other as they are very different use cases.

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

Another thing about SECTION is that you shouldn't use it if your page has only the one section. Also, each section must have a heading (H1-6, HGROUP, HEADING). Headings are "scoped" withing the SECTION, so e.g. if you use a H1 in the main page (outside a SECTION) and then a H1 inside the section, the latter will be treated as an H2.

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

The examples in the specare pretty good at time of writing.

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

So in your first example would be correct if you had several sections of content which couldn't be described as ARTICLEs. (With a minor point that you wouldn't need the #primary DIV unless you wanted it for a style hook - P tags would be better).

因此，如果您有多个无法描述为 ARTICLE 的内容部分，那么在您的第一个示例中将是正确的。（有一个小问题，除非您希望将其用于样式挂钩，否则您不需要 #primary DIV - P 标签会更好）。

The second example would be correct if you removed all the SECTION tags -- the data in that document would be articles, posts or something like this.

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

SECTIONs should not be used as containers -- DIV is still the correct use for that, and any other custom box you might come up with.

SECTIONs 不应用作容器——DIV 仍然是正确的用法，以及您可能想出的任何其他自定义框。

回答by Christian Treppo

You can definitely use the section tag as a container. It is there to group content in a more semantically significant way than with a div or as the html5 spec says:

您绝对可以将 section 标记用作容器。与 div 或 html5 规范所说的相比，它可以在语义上更重要的方式对内容进行分组：

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. http://www.w3.org/TR/html5/sections.html#the-section-element

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

回答by Kilmazing

The correct method is #2. You used the section tag to define a section of your document. From the specs http://www.w3.org/TR/html5/sections.html:

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

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead

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

回答by Medhat

that's just wrong: is not a wrapper. The element denotes a semantic section of your content to help construct a document outline. It should contain a heading. If you're looking for a page wrapper element (for any flavour of HTML or XHTML), consider applying styles directly to the element as described by Kroc Camen. If you still need an additional element for styling, use a . As Dr Mike explains, div isn't dead, and if there's nothing else more appropriate, it's probably where you really want to apply your CSS.

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

you can check this : http://html5doctor.com/avoiding-common-html5-mistakes/

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