Doubt Semantic Html5

Question

What’s right for sidebar?

<div>
   <aside></aside>
   <aside></aside>
</div>

---

<aside>
   <section></section>
   <section></section>
</aside>

---

<section>
   <aside></aside>
   <aside></aside>
</section>

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

Answer 1

About <aside>:

The specification of W3C on the aside says so:

The <aside> element represents a Section of a page that consists of content that is tangentially Related to the content Around the aside element, and which could be considered.

This means 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 don’t have directly to do with the page.

That said I wouldn’t use <aside> for a sidebar other than in specific cases of external references +/- related to my page.

About <section>:

Looking at what it says to specification for <section>:

The <section> element represents a Generic Section of a Document or application.

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

About <div>:

The element <div> can be used for anything. 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 right element depends on the content you are grouping on that sidebar.

So if you’re inside the sidebar:

• links and internal navigation:

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

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

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

  Use the tag <aside>.

Answer 2

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

The element <section>

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

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

The element <aside>

It 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 as examples of use:

• Citations
• Advertising
• Groups of elements nav
• Analogous to the side bars of the printed medium

The element <div>

It represents nothing in particular; it only groups elements and assigns them common semantics through attributes class, lang and title.

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

What to use?

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

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

Correct use depends on the semantics of its content.

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

  Put the <aside> within the <section> to clarify the relationship between.

  <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>

  Put the <aside> beside the <section> to make clear the relationship of brotherhood.

  <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 the <aside> is extensive

  Put several <section>s within the <aside> to make clear the outline of the document and the boundaries between sections.

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

Several real examples of use can be found in the specification itself, in the sections of each element.

---

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

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

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

Imagine an extension for browsers that outlines the pages and displays a summary for the user to facilitate navigation. It would be easier for the program to analyze the page if your sections are clearly identified. It is only possible to create a summary for the books because the chapters are clearly outlined. If the developer uses only <div>s on your page, the work of the program gets much more difficult, there is uncertainty regarding the true structure of the document and this generates the possibility of unsatisfactory results: useless summaries that do not take the user anywhere useful.