Skip to content

Quick SEO Tips

Can Aside Element Be Inside Main Element?

Category: Semantics Published:

Which one of these is valid?

1<main>
2 ... main content
3 <aside>
4 ...some aside content
5 </aside>
6</main>
1<main>
2 ...main content
3</main>
4<aside>
5 ...some aside content
6</aside>

Answer: either works! Let's have a quick look at what the HTML spec says:

"The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content."

HTML Spec: 4.3.5 The Aside Element

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.