Menu
Let's say aside element includes "Oh, by the way …" content such as reading suggestions, advertisements, or cross sells.
aside outside of main?aside outside of main, such as "skip to main content" command?aside tag outside or inside of main.
946
The <aside> element useful for marking up a pull quote, which could be used on a web site where there were client testimonials. Other uses for the <aside> element include sidebars, advertising, and marking up content from other sources, such as social media updates.
It does matter yes. Where to put it is defined by how the content in the aside tag relates to the main section . Show activity on this post. Yes, it the <aside> inside the <section> is perfectly valid markup and will pass W3C validation, if that's what you're worried about.
Definition and Usage The <aside> tag defines some content aside from the content it is placed in. The aside content should be indirectly related to the surrounding content. Tip: The <aside> content is often placed as a sidebar in a document. Note: The <aside> element does not render as anything special in a browser.
Links: http://dev.w3.org/html5/spec/Overview.html#the-header-element. http://dev.w3.org/html5/spec/Overview.html#the-aside-element. If the header in the aside is meant to be a header for the page though (instead of just for the aside element), then it shouldn't be in the aside.
In HTML5 it’s only defined that aside is "related to the content around the aside element".
In HTML 5.1 (CR) the definition became more specific, as it now says that 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. The main element is not a sectioning element (elements like article, section, body, figure etc. are). You can of course still place aside in main, but it will be related to the nearest sectioning element parent of main.
That means there is no semantic difference (for aside) in these two examples:
<body> <main></main> <aside><!-- related to the body --></aside> </body> <body> <main><aside><!-- related to the body --></aside></main> </body> Example that shows a few 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> If your <aside> is directly related to the content in you <main> then I would leave it in the <main>. Now, that being said...
<aside> outside a <main> (as in, it is valid, but your content might warrant otherwise).<aside> outside a <main> has no harm nor benefit for accessibility. As long as you follow good structure and valid mark-up, you should be fine.<aside>s outside <main> on my site, and had <aside>s inside <main> as well, and I have seen no difference in my ranking. Given that search engines are generally opaque about specific bits like this, I would consider some A/B testing if you are concerned.Related materials from HTML5 Doctor, which is written by one of the HTML5 spec editors:
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
