HTML5: difference between section and article

HTML5 introduces two new elements that pose some semantical problems concerning their use: article and section. Most web developers get confused by these new elements. Generally speaking, the semantics of these elements is not well-defined in the HTML5 specifications. Let's try to make things clearer.

section

section is a generic part of a document. It's generally used to contain other parts of your page. As its name says, it can contain any kind of content. In a broader sense of the term, this element is a more semantical version of a div (which stands for "division"). Another common use of this element is related to content structure. Imagine that you have marked up a book or a publication on a single web page. You can use section to wrap the various chapters:

<section id="ch1">
  <header>
    <hgroup>
      <h1>Title</h1>
      <h2>Description</h2>
    </hgroup>
  </header>
  <!--content-->
  <footer>
    <!--foot notes-->
  </footer>
</section>
<!--other chapters-->

In a nutshell: section is a generic, macro-component of an HTML5 document that serves as a wrapper for more specific content.

article

Unlike section, article is a more specific, micro-component of a document. Its purpose is to wrap the main contents of your document into logical sections. Blog entries, articles, page contents can all be included within this element. Combined with section, it completes the overall structure of an HTML5 document. For example, we can rewrite our previous example as follows:

<section id="ch1">
  <header>
    <hgroup>
      <h1>Title</h1>
      <h2>Description</h2>
    </hgroup>
  </header>
  <article>
    <!--content-->
  </article>
  <footer>
    <!--foot notes-->
  </footer>
</section>
<!--other chapters-->

As you can see, the actual content of each chapter has been wrapped with this element. If you take a look at the most recent Wordpress templates, such as Yoko or TwentyEleven, you'll notice that article is used both to wrap posts and page contents.