HTML 5 element for content?

Question

Which of the new HTML5 elements should be used instead of div.container and div.content ?

<header>
  site header
</header>

<div class="container">

  <div class="content">

    <article>
      content
    </article>

    <article>
      content
    </article>

    <article>
      content
    </article>

  </div>

  <aside>
    sidebar
  <aside> 

</div>

<footer>
  site footer
</footer>

Answer 1

You can't answer this example in general, it depends on the content of the page.

What matters here is the outline of your page. Therefor, you can ignore all div elements as they don't influence the outline. Only use them if you need them as hooks for CSS or JavaScript.

The first question would be: Is the aside related to the whole page or is it related to the "content area"? If it is related to the whole page, it must not be included in another sectioning element. If it is related to the content area, it has to be included in that sectioning element. Here I assume that it is related to the whole web page.

The second question: Is there a common heading for the three article elements? Examples would be: "My favorite books", "Latest blog posts", or "Products". If so, you should use a sectioning element which groups these three article elements. If there would be no possible heading, you probably don't want a sectioning element here, so could use div or not element at all.

The third question (if the second question was answered positively): Should this sectioning element be an section or an article element? If your choice of using the article element for these three "things" is correct, you probably (but not inevitably!) need a section here. Whether it was correct at all to use article, again, depends on the real content. So it could be possible that you rather want

<article> 
  <section></section>
  <section></section>
  <section></section>
</article>

instead of

<section> 
  <article></article>
  <article></article>
  <article></article>
</section>

Here I assume that your choice of using article for the three "things" is correct.

So the final version might look like:

<header>
  <!-- if this header applies to the whole page -->
</header>

<section>

  <!-- a h1 like "Latest blog posts" -->

    <article>
      content
    </article>

    <article>
      content
    </article>

    <article>
      content
    </article>

</section>

<aside>
    <!-- if this aside applies to the whole page -->
<aside> 

<footer>
  <!-- if this footer applies to the whole page -->
</footer>