Can Aside Element Be Inside Main Element?
Which one of these is valid?
1<main>2 ... main content3 <aside>4 ...some aside content5 </aside>6</main>
1<main>2 ...main content3</main>4<aside>5 ...some aside content6</aside>
Answer: either works! Let's have a quick look at what the HTML spec says:
Notice the wording "around the aside element". Having the aside
be inside the main
would make the aside
be considered separate from the main content of the page, and having it be outside would mean that it is separate from the entire document (in other words the whole page, as the next element would most likely the <body>
).
This results into you having to decide if the content of your aside is unrelated to your main content or the whole page.
Does it really matter though? Probably not. So if you have some aside content in the middle of the main element, just put it in the middle of it, and if the aside content is after main content, you can choose either one.