Should I have aside element ouside or inside of main element?

Asked 24/6, 2016 at 22:43 Answered 25/6, 2016 at 13:24

Solved html seo accessibility semantic-markup

Let's say aside element includes "Oh, by the way …" content such as reading suggestions, advertisements, or cross sells.

Is it semantically okay to have aside outside of main?
If yes, does it have any advantage over accessibility if I keep aside outside of main, such as "skip to main content" command?
Last but not the least, I would like to know if there is any SEO impact if I include aside tag outside or inside of main.

Wallas answered 24/6, 2016 at 22:43 Comment(2)

Please note that asking for "SEO impact" is off-topic on Stack Overflow. Such questions can be asked on Webmasters. – Emmieemmit 25/6, 2016 at 13:25

Thanks @unor! I will keep this in my mind for future questions. – Wallas 26/6, 2016 at 4:30

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>

Emmieemmit answered 25/6, 2016 at 13:24 Comment(5)

Thanks for adding more details. After referring to specs, I have marked yours as answer given that it is more relevant. – Wallas 13/9, 2019 at 0:31

WCAG success criterion 1.3.1: Info and Relationships identifies aside and main as landmarks. As such, they should not be nested. Nesting landmarks makes it difficult for people using assistive technologies to perceive such content. – Vitalism 7/12, 2019 at 5:25

@ZGuard: Did you maybe link to the wrong page? Couldn’t spot the relevant info on this page, but found it on w3.org/TR/wai-aria-practices/examples/landmarks/… ("complementary landmarks should be top level landmarks"). As it can be semantically appropriate to nest aside inside main, maybe it would make sense to overwrite the aside’s implicit role by explicitly specifying a non-landmark one? – Emmieemmit 7/12, 2019 at 7:52

I realize the link I posted is very general. Your resource is more to the point. An article from Deque University specifically mentions aside, suggesting it is interpreted as a complementary landmark. But overriding the semantics is a smart idea, especially if restructuring the HTML is off the table. – Vitalism 7/12, 2019 at 20:29

Further to @Emmieemmit comment: "Landmark roles can be nested to identify parent/child relationships of the information being presented." w3.org/TR/wai-aria-practices/examples/landmarks/index.html – Trackandfield 1/4, 2022 at 1:31

If your <aside> is directly related to the content in you <main> then I would leave it in the <main>. Now, that being said...

Yes, it is semantically ok to have <aside> outside a <main> (as in, it is valid, but your content might warrant otherwise).
I do not understand how you are thinking the skip link comes into play here, but 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.
I am aware of none. I have <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:

Hialeah answered 25/6, 2016 at 2:9 Comment(0)

Recommended topics

Hot tags