Section

The section and article elements are probably the two most confusing new elements in html5. At first glance, they appear very similar but they both have their own distinct purpose.

A section element is exactly that, it represents a section in the document. A section element can contain both the header and footer elements for further partition and should almost always have a heading. In a way, a section element is a more general version of an article element. If it makes sense to use an article element, use that instead.

Article

An article element represents data that could be used on it’s own, outside the context of the website. The most common use would be for a blog post. Other uses of the article element would be for forum posts and user comments.

Header

This section can be used in the main html document or within a section element. It will typically contain “introductory” elements such as a logo, banner, and/or navigation. A blog post for example could have a header containing the title of the post as well as the author that wrote it and the date it was posted.

Footer

The footer element can contain much of the same elements that the header element can. This is usually in the form of “meta data” for the section in which it is contained. The main footer for a site might contain a site map and/or copyright information. While very similar to the header element, the footer element does not act as a section.

Nav

The nav element is used to denote any major navigation. This would usually be the main navigation in either the header or sidebar of the page. It may also be used for the pagination links in a blog or gallery.