Proper usage of HTML5 elements & structure

I need to convert a PSD to HTML5/CSS. I'm having problems finding a definitive answer on what elements to use. My layout consists of a header, content/sidebar and footer. The template structure is below.

I understand you can use multiple header / footer elements with HTML5, I've got the main header/footer tags. The main problem I'm having is with the structure of the content.

I've got a main content area, and then a sidebar, the sidebar content doesn't really relate to the content. Within the sidebar I need to have multiple content boxes.

The content area has various sections, mainly a featured image with text on, and then the rest is just the page text.

From what I understand, using the <section> tag to define the content / sidebar isn't semantic as it's not content related, it's page structure / layout. Does my markup below look correct for the structure I'm trying to achieve?

    <header>

    </header>

    <div class="wrapper">
        <div class="main">
            <section id="featured-content">
                <img />
                <p>Featured text</p>
            </section>

            <section id="main">
                <header><h2>Title</h2></header>
                <p>The rest of content goes here</p>
            </section>
        </div>

        <aside class="sidebar">
            <section class="content-box">
                <header>Box title</header>
                <p>Box content</p>
            </section>

            <section class="content-box">
                <header>Box title</header>
                <p>Box content</p>
            </section>
        </aside>
    </div>

    <footer>

    </footer>`

enter image description here

Solution

In general: If the header only contains a heading, you could omit it.

If the main content of the page could stand on its own (e.g. like a blog post or similar), then you could use article instead of section.

As the #featured-content is some kind of abstract/summary of the main content, it should be part of the article. It makes sense to include it in the header:

<article>

  <header>
    <h2>(article title)</h2>

    <img src="" alt="(article teaser image)">
    <p>(article teaser text)</p>
  </header>

  <p>(article content)</p>

</article>

(Only if the teaser is really complex (e.g. containing headings itself), it could get its own section.)

Using aside for the sidebar is correct, because its content is "tangentially related" to the whole page (!) and not only to the main content (in that case, it should be include in the article, too).

If all content blocks in that aside are somewhat related, using section inside of that aside for each block is correct (but, depending on the actual content, article could be appropriate, also). However, if the blocks inside of that aside have no relation (easy test: do you find a heading for the whole aside?), you could consider using a separate aside for each of it:

<div class="sidebar">
  <aside>
    <h2>…</h2>
  </aside>

  <aside>
    <h2>…</h2>
  </aside>
</div>

So the structure could look like:

<body>
  <h1>…</h1> <!-- maybe with header -->

  <article>
    <h2>…</h2>
  </article>

  <aside> 
    <h2>…</h2> <!-- omit it or hide it visually -->

    <section> <!-- or article -->
      <h3>…</h3>
    </section>

    <section> <!-- or article -->
      <h3>…</h3>
    </section> 

  </aside> <!-- resp. use 1 aside for each block -->

  <footer></footer>

</body>