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

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元素表示文档或应用程序的通用部分.在此上下文中,部分是内容的主题分组,通常带有标题.

部分的示例可以是章节,选项卡式对话框中的各种选项卡式页面,或论文的编号部分.网站的主页可以分为几个部分,用于介绍,新闻和联系信息.

鼓励作者使用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

在关于构建HTML5的W3 wiki页面中,它说:

<section>:用于将不同的文章分组到不同的目的或主题,或定义单个文章的不同部分.

然后显示我清理的图像:

了解如何使用<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>