It may not be clear whether a <section> may contain one or several <article> elements or if an <article> may contain one or several <section> elements.
The <article> element was designed for stand-alone parts of a document that could eventually be syndicated in RSS streams.
<section> elements are used to cut a logical part into subparts.
An <article> may be cut into different <section> elements!
Example of a blog post defined as a long <article>, that is in turn cut into smaller <section> elements:
<article id="id1">
<section id="id1part1">
<h2>Introduction</h2>
</section>
<section id="id1part2">
<h2>My travel to India</h2>
</section>
<section id="id1part3">
<h2>Return to France</h2>
</section>
</article>
The blog example from earlier, on the other hand, uses a single <section> that contains several <article> elements.
Indeed, we can also have a <section> that regroups all blog posts per month, each one being an <article> element.
A <section> may be cut into different <article> elements, too!
Yes you can, in case you would like to propose some navigation links with each blog post, for example:
<article>
<header>
<h1>Blog post title</h1>
<p>Author: Michel</p>
</header>
<nav>
<ul>
<li><a href="...">Next post</a></li>
<li><a href="...">Previous post</a></li>
<li><a href="...">Contact author</a></li>
</ul>
</nav>
<p>Content...</p>
<footer>
<p>Posted by Michel, the <time datetime="2012-02-02">February 2,
2012</time> </p>
</footer>
</article>
In that case, the <nav> element proposes navigation links to the next or previous blog post, as well as a link to contact the author of the blog post.
Also note that we used in that example a <footer> element in the blog post.
The new elements have been primarily designed to better structure the code of HTML pages such as those generated by blog or CMS software, however do not forget that they add new semantics and will be taken into account by :
Browsers natively or browsers' extensions, i.e. for automatically generating a table of contents, an outline view of the document, for applying default CSS rules to these elements, etc. See for example the table-of-contents-crx extension (Chrome extension). More on that in the next section of the course.
Text to speech.
Web crawlers, etc.
You can use <div> elements in all cases where the proposed structural elements do not fit your needs: for defining some content that should be styled, for example.