The specifications of W3C reads - "The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading".

In the picture below, what has been pointed are best to use <section>

An example of section

Beware, the "section" element is not here to replace every single "div" element.

You should not use <section> element for :

  1. Syndicated content. You do not use <section> for content in the RSS feed. If you are creating a blog website, do not use section element for your blog entry, instead, you should be using article element. However, an article element can contain section element(s).
  2. Purely for layout purpose. Use <div> element instead as generic container for styling purpose.

You may notice I am using <h1> as heading within section element. section element is actually one of sectioning content in HTML5.

A sectioning content ...

  • is always a subsection of its nearest ancestor such as <body>, <article> or another <section> element.
  • has their own outline which can be independent from its parent document. You are encouraged to use h1 to h6 within section element without bothering what happen outside of the section. Simply, that gives you less headache in future.
  • can have their own <header>, <hgroup> and <footer>

Therefore, it is perfectly okay if you code it as following. In fact, you are very much encouraged to code so.

If you are designing a HTML5 document, I would recommend you to check out HTML5 Outliner. It will tell if your document is properly outlined.