html - Nesting HTML5 section tags

Question

Is this a correct way to use the <section> tag?

<section id="container">
   <section id="outer">
      <section id="inner">
      </section>
   </section>
</section>

I'm trying to work out whether or not I should use only one section id, and leave the other two sections as just divs?

Answer 1

If you are just using these elements to place things in some position / style things, then you should probably be using divs.

Section is really for grouping content that belongs together - you shouldn't really have a section without a title (H1 or similar) element describing what the section contains... a few people have made similar mistakes in the past I think:

http://html5doctor.com/the-section-element/

From the spec:

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

Having said that, it's perfectly acceptable to nest section elements. Maybe something like:

<section>
    <h1>Portishead</h1>
    <p>Portishead are a cool band from Bristol</p>
    <section>
        <h1>Dummy (album)</h1>
        <p>some info....</p>
        <img src="..." />
    </section>
    <section>
        <h1>Portishead (album)</h1>
        <p>some other info info....</p>
        <img src="..." />
    </section>
</section>