HTML5 - Elemento aside

O elemento aside define um bloco de conteúdo que faz referência ao conteúdo principal que o cerca, pode estar ou não em uma barra lateral (sidebar) exibindo informações contextuais, assuntos relacionados, conteúdo publicitário ou um grupo de navegação secundária.

Quando usado dentro de um elemento article, seu conteúdo está diretamente relacionado com o conteúdo do artigo, quando usado fora de um elemento article, está relacionado com o conteúdo global do documento como, por exemplo, uma lista de links de um blog (blogroll), blocos de navegação complementar e também publicidade relacionada com conteúdo do documento.

Veja no exemplo abaixo como o primeiro elemento aside está diretamente relacionado ao conteúdo do elemento article acrescentando informações sobre o conteúdo do artigo (especificando um determinado tipo de trompete) e como o segundo elemento aside oferece informações complementares sobre o conteúdo global da página (os instrumentos de metal em geral)


Os Metais

Trompete

O trompete é um instrumento de sopro de metal cuja etc...

<header>
<h1>Os Metais</h1>
</header>
<article>
<h1>Trompete</h1>
<p>O <b>trompete</b> é um instrumento de sopro de metal cuja etc...</p>
<aside>
<h2>Você sabia ?</h2>
<dl>
<dt>Trompete  pícolo</dt>
<dd>É um trompete pequeno geralmente utilizado para...</dd>
</dl>
</aside>
</article>
<aside>
<h3>Conheça outros instrumentos de metal</h3>
<ul>
<li><a href="#">Trombone</a></li>
<li><a href="#">Trompa</a></li>
<li><a href="#">Tuba</a></li>
</ul>
</aside>