How to correctly use "section" tag in HTML5?

Question

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.

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

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?

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?

Answer 1

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.

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

Also see:

• 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 not a generic wrapper, like <div> is. It should be used for semantic purposes, and not a CSS or JavaScript hook (although it certainly can be styled or "scripted").

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.

Answer 2

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

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

And then displays an image that I cleaned up:

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

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

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