Beyond HTML5 and CSS3

The <code>section</code> and <code>article</code> elements are two new elements we can use to more clearly define our content when we use HTML5. There’s a lot of confusion about how these should be used, so let’s try to clear it up.

Sections are logical regions. A newspaper may have a “Sports” section. That sports section may, in turn, have many subsections, like the socres page, a section for football, hockey, baseball, and even another section for local sports. Sections can be nested within other sections, and that’s how you use them in HTML5 too.

The sports section also has many articles. Articles contain syndicatable content that can stand on its own. That’s the key phrase though – the article <em>must be able to stand on its own.</em>.

So sections are really logical separations, whereas articles describe real content. It gets a little more complicated because articles themselves can be divided up into sections too.