In HTML5, aside is only "related to the content around the aside element".
In HTML 5.1 (CR) the definition became more specific: aside is "related to the content of the parenting sectioning content".
Following the newer definition, the aside element should be inside of the section element to which it is related.
bodyheaderfooternavarticlesectionaside| <body> | |
| <main> | |
| <article> | |
| <aside><!-- related to the article --></aside> | |
| <section> | |
| <aside><!-- related to the section --></aside> | |
| <div> | |
| <aside><!-- related to the section (not to the div!) --></aside> | |
| </div> | |
| </section> | |
| </article> | |
| <aside><!-- related to the body (not to the main!) --></aside> | |
| </main> | |
| <aside> | |
| <!-- related to the body --> | |
| <aside><!-- related to the (parent) aside --></aside> | |
| </aside> | |
| <nav> | |
| <aside><!-- related to the nav --></aside> | |
| </nav> | |
| <footer> | |
| <aside><!-- related to the footer --></aside> | |
| </footer> | |
| </body> |