HTML5 structure—div, section & article ・ @boblet

HTML5 structure—div, section & article ・ @boblet

1. <div>—the "generic flow container" we all know and love. It’s a block-level element with no additional semantic meaning (W3C:Markup, WhatWG)
2. <section>—a "generic document or application section". A <section> normally has a heading (title) and maybe a footer too. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface. (W3C:Markup, WhatWG)
3. <article>—an "an independent part of a document or site". This means it should be able to ‘stand alone’, and still make sense if you encountered it somewhere else (eg in an RSS feed). Examples include a weblog article (duh), a forum post or a comment. Like <section> these generally have a header, and maybe a footer (W3C:HTML, WhatWG)

The new HTML5 <section> element is similar to <div> as a general container element, but it *does* have some semantic meaning—the things it contains are a logical group of related content:

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, possibly with a footer.

The section element | HTML5 Doctor

# Don’t use it just as hook for styling or scripting; that’s a div
# Don’t use it if article, aside or nav is more appropriate
# Don’t use it unless there is naturally a heading at the start of the section
# The revised spec (as of 16 September) says:
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.

As blogposts and comments are often syndicated (by being pulled into other blogs or being linked via twitter, reddit etc) they should be articles.