HTML5 introduces two new elements that pose some semantical problems concerning their use:
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 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 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.