CODEWITHSUNDEEP
htmlseoaccessibilitysemantic-markup
Pratik Mehta
Pratik Mehta

Reputation: 2119

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

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

  1. Is it semantically okay to have aside outside of main?
  2. If yes, does it have any advantage over accessibility if I keep aside outside of main, such as "skip to main content" command?
  3. 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.

Upvotes: 38

Views: 37914

Answers (2)

unor
unor

Reputation: 96737

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>

Upvotes: 60

aardrian
aardrian

Reputation: 9029

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

  1. Yes, it is semantically ok to have <aside> outside a <main> (as in, it is valid, but your content might warrant otherwise).
  2. 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.
  3. 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:

Upvotes: 14

Related Questions