Can you use an <aside> element inside a <section role="main"> element?

Question

I'm in the process of improving accessibility in my HTML using HTML5 and WAI-ARIA.

It is OK to have the following set up?

<!-- main content -->
<section id="main" role="main">
    <h1>The main content</h1>

    <!-- This div needs to be here for styling reasons -->
    <div class="the-content">    
         <p>All the text that goes with the main content</p>
    </div>

    <!-- the sidebar -->
    <aside id="sidebar" role="complementary">
        <h2>A title</h2>
        <p>Some text</p>
    <aside>
</section>

The thing I'm not sure of is if I should have the <aside> element outside of the <section> and the role="main" container. Does that matter?

Answer 1

It does matter yes. Where to put it is defined by how the content in the aside tag relates to the main section.

For example:

If the content in the aside is related to the main article, it should be inside the main section. However if the content inside the sidebar aside tag is different to main I would put it outside of the main section

http://html5doctor.com/aside-revisited/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside