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

我试图在HTML5中构建一个布局，并阅读了几个不同的文章，我只是困惑。我试图得到一些如何使用它的输入。

下面是我来回变化的变化：

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

你可以使用section标签来做一个容器吗？

<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>的正确方法是什么？标签？

解决方法

答案是在目前的规格：

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.

参考：

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

原文链接：https://www.f2er.com/html5/170252.html

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

解决方法

猜你在找的HTML5相关文章