Geek Answers Handbook

Should I have an ouside element aside or inside the main element?

Let's say the aside element includes “Oh, by the way ...” content, such as reading offers, advertisements, or cross-selling.

  • Is it semantically good to have aside outside main ?
  • If so, does it have any advantage over accessibility if I keep aside outside main , for example, the "go to main content" command?
  • Last but not least, I would like to know if there are any consequences for SEO if I include the aside tag outside or inside main .
+5
source share
2 answers

If your <aside> directly related to the content in you <main> , I left it in <main> . Now that it’s said ...

  • Yes, it is semantically normal to have <aside> outside of <main> (as in, it is valid, but your content may require otherwise).
  • I don’t understand how you think the link to skips comes into play here, but otherwise, <aside> outside of <main> has no harm or benefit to accessibility. As long as you keep up the good structure and the actual premium, you should be fine.
  • I know nothing. I have <aside> outside <main> on my site, and also <aside> inside <main> , and I did not see the difference in my ranking. Given that search engines are generally opaque with respect to certain bits like this, I would consider some A / B tests if you are interested.

Related HTML5 Doctor content written by one of the HTML5 specification editors:

+5
source

In HTML5, it is only defined that aside "linked to the content around the aside element".

In HTML 5.1 (CR), the definition has become more specific since it now says that aside “related to the content of the content of the parenting section”.

Following the new definition, the aside element must be inside the element of the section with which it is associated. The main element is not a sectioning element (elements such as article , section , body , figure , etc.). Of course, you can put aside in main , but it will be associated with the closest parent of the section main element.

This means that in these two examples there is no semantic difference (for aside ):

 <body> <main></main> <aside><!-- related to the body --></aside> </body> 
 <body> <main><aside><!-- related to the body --></aside></main> </body>

An example that shows several different cases:

 <body> <main> <article> <aside><!-- related to the article --></aside> <section> <aside><!-- related to the section --></aside> <blockquote> <aside><!-- related to the blockquote (not to the section!) --></aside> </blockquote> <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 body (not to the footer!) --></aside> </footer> </body>
+2
source

More articles:


All Articles