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

Question 1

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

html seo accessibility semantic-markup

Pratik Mehta · Jun 25, 2016 · Viewed 14.7k times · Source

Answer

Answer

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>

Question 2

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.

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

Answer

Related questions