About <aside> :

The W3C specification about aside reads like this:

  

The <aside> element represents the section of a page that consists of content that is tangentially related to the content element, and which could be considered separate from that content.

This means that it should be used to gather content that is "tangentially related" to the page. I understand this as widgets, links to related pages, and other links / parts that do not directly relate to the page.

Having said that I would not use <aside> for a sidebar but in specific cases of external references +/- related to my page.

About <section> :

Looking at the specification for <section> :

  

The <section> element represents the generic section of a document or application.

Freely translated: "An element that represents a generic section of the document" .

About <div> :

The <div> element can be used for anything. The W3C says just that:

  

The element has no special meaning at all.

So use whenever you need to group content with no special semantic meaning.

What to use then?

The correct element depends on the content you are grouping in this sidebar.

So if you have it inside the sidebar:

• links and internal navigation:

  Use the <nav> tag. W3C says that the <nav> tag should mark a section with navigation links.

    

  The <nav> element represents a section with navigation links.

• links to other pages, more or less related content:

  Use the <aside> tag.

Regarding the semantic meaning of the elements, the current authority is the HTML5 specification , promulgated by the World Wide Web Consortium.

The <section> element

Represents a section of the document. It is a content thematic group, identified by a title that is represented by the elements <h1> a <h6> . The specification cites concrete examples:

• Chapters
• Numbered sections of a thesis
• Web site with introduction sections, news and contact information
• Individual pages in an interface tabs

The <aside> element

Represents a section of the document that consists of content that can be considered separate, tangential to the content around the element. The specification provides examples of usage:

• Quotes
• Advertising
• Element groups nav
• Analog to printed media sidebars

The element <div>

It does not represent anything in particular; Only groups elements and assigns them through the common semantic attributes class % lang and title .

The specification recommends that authors use the element <div> only when no other element presents the appropriate semantics. This makes it the developer's last resort.

What to use?

Using <aside> within <div> is semantically poor and therefore discouraged.

It is not absolutely necessary that a <aside> is within a <section> , nor that a <section> is within a <aside> .

The correct usage depends on the semantics of your content.

• If the content of <section> is related to <aside>

  Put <aside> within <section> to make clear the relationship.

  <section>
    <h1>Título</h1>
    <p>Conteúdo.</p>
  
    <aside>
      <blockquote>Citação relacionada ao conteúdo.</blockquote>
    </aside>
  </section>
  

• If the content of <section> is not related to <aside>

  Place <aside> next to <section> to clarify the brotherhood relationship.

  <aside>
    <nav>
      <h1>Capítulos</h1>
      <ul>
        <li><a href="capítulo-1">Capítulo 1</a></li>
        <li><a href="capítulo-2">Capítulo 2</a></li>
        <li><a href="capítulo-3">Capítulo 3</a></li>
      </ul>
    </nav>
  </aside>
  
  <section>
    <h1>Capítulo 2</h1>
    <p>Conteúdo do capítulo 2.</p>
  </section>
  

• If <aside> is extensive

  Place multiple% s of% s within <section> to make clear the document layout and boundaries between sections.

  <aside>
    <h1>Publicidade</h1>
  
    <section>
      <!-- Primeiro banner -->
    </section>
  
    <section>
      <!-- Segundo banner -->
    </section>
  </aside>
  

Several actual examples of usage can be found in the specification itself, in the sections of each element.

  

And could someone explain me rules about when to use <aside> or <div> ?

The difference between the two is that <section> represents a subdivision of the HTML5 document. It sections the document, dividing it into parts. It is an analysis of how a book is subdivided into chapters and various other pre-textual and post-textual elements.

The <section> simply represents the elements contained in it. There is no implication in the semantic structure of the document.

Imagine a browser extension that delineates pages and displays a summary for the user to facilitate navigation. It would be easier for the program to parse the page if its sections are clearly identified . You can only create a table of contents for the books because the chapters are clearly delineated. If the developer use only <div> s on your page, the program of work is much more difficult, there is uncertainty about the true structure of the document and this creates the possibility of unsatisfactory results: useless summaries that do not take you anywhere useful.