<aside> tag usage confusion [duplicate]

Question

This question already has answers here:

Why use an HTML5 semantic tag instead of div? [duplicate] (3 answers)

Closed 9 years ago.

I read about <aside> tag here: http://www.w3schools.com/tags/tag_aside.asp, but unable to understand the real motive of this tag.

What is the difference between a content in this tag and the one outside?

I mean if content is related but different than content surrounding this tag, then div can be used. What is special about this tag in comparison to other old container tags? Is it helpful in SEO?

Answer 1

In HTML5, everything in body is part of a section. Every section can have a header and a footer. Everything not in header/footer can be considered the main content of that section. The aside element can be used for "content that is considered separate from the main content of the page".

If you’d use div instead of aside, its content couldn’t be separated from the other, "real" main content of that article:

<article>
  <h1>Cute cat</h1>
  <p>I like cats.</p>
  <div class="aside">
    <!-- and now for something completely different -->
  </div>
  <p>Next time, I get a dog.</p>
</article>

If you wouldn’t use HTML5’s sectioning elements for that content, the only alternative would be to use explicit headings (this is what we would have to do in HTML 4.01):

<article>
  <h1>Cute cat</h1>
  <p>I like cats.</p>
  <div class="aside">
    <h2>Good cat litter boxes</h2>
    <!-- and now for something completely different -->
  </div>
  <p>Next time, I get a dog.</p>
</article>

Problem: the last p would be in scope of the h2 (which starts a new implicit section). But this p isn’t about the cat litter box advertisement, it’s part of the content from before the div.

Solution:

<article>
  <h1>Cute cat</h1>
  <p>I like cats.</p>
  <aside>
    <h2>Good cat litter boxes</h2>
    <!-- and now for something completely different -->
  </aside>
  <p>Next time, I get a dog.</p>
</article>

Now it’s clear which is the main content of that article:

Cute cat
I like cats.
Next time, I get a dog.

And the aside is tangentially related to the parent section: both are about cats, and you only posted this cat litter box advertisement because you a writing about cats in that article.

User agents could do all kind of stuff with this information. Search engines could lower the relevance of that content (if or which services do that is a different question and probably off-topic on SO), browsers could display these as sidebars, extractors could ignore them, screen readers could skip them when reading the main content, etc.