<section> or <article>, which is contained in which

Question

Trying to get my head around the new semantic elements in HTML5.

Does a <section> belong inside an <article> or is it the other way around? Does it even matter?

I'm looking at structuring a wordpress blog something like this:

Is this reasonable, or am I missing something?

Answer 1

From the HTML5 spec:

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

and

The article element represents an independent section of a document, page, or site. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, or any other independent item of content.

So I would say both section and article elements can contain the other element, if appropriate. I think your diagram makes sense, apart from the nested section elements:

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.

Maybe use a <div> for the outer one?

Answer 2

I would use div for the outer one, and div for the inner one, unless you have a heading directly inside the inner section.

Ta

Rich

See http://html5doctor.com/the-section-element/ for more info.