Em relação ao significado semântico dos elementos, a atual autoridade é a especificação do HTML5, promulgada pelo World Wide Web Consortium.
Representa uma seção do documento. Trata-se de um grupo temático de conteúdo, identificado por um título que é representado pelos elementos <h1>
a <h6>
. A especificação cita exemplos concretos:
- Capítulos
- Seções numeradas de uma tese
- Web site com seções de introdução, notícias e informações de contato
- As páginas individuais em uma interface guias
Representa uma seção do documento que consiste de conteúdo que pode ser considerado separado, tangencial ao conteúdo em volta do elemento. A especificação fornece como exemplos de uso:
- Citações
- Publicidade
- Grupos de elementos
nav
- Análogos às barras laterais do meio impresso
O elemento <div>
Não representa nada em especial; apenas agrupa elementos e atribui a eles semântica comum através dos atributos class
, lang
e title
.
A especificação recomenda que autores usem o elemento <div>
apenas quando nenhum outro elemento apresentar a semantica apropriada. Isso faz dele o último recurso do desenvolvedor.
O que usar?
Utilizar o <aside>
dentro do <div>
é semanticamente pobre e portanto desencorajado.
Não é absolutamente necessário que um <aside>
esteja dentro de uma <section>
, nem que uma <section>
esteja dentro de um <aside>
.
O uso correto depende da semântica do seu conteúdo.
Se o conteúdo da <section>
está relacionado ao <aside>
Coloque o <aside>
dentro da <section>
para deixar clara a relação de parentesco.
<section>
<h1>Título</h1>
<p>Conteúdo.</p>
<aside>
<blockquote>Citação relacionada ao conteúdo.</blockquote>
</aside>
</section>
Se o conteúdo da <section>
não está relacionado ao <aside>
Coloque o <aside>
ao lado da <section>
para deixar clara a relação de irmandade.
<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>
Se o <aside>
é extenso
Coloque várias <section>
s dentro do <aside>
para deixar claro o delineamento do documento e os limites entre as seções.
<aside>
<h1>Publicidade</h1>
<section>
<!-- Primeiro banner -->
</section>
<section>
<!-- Segundo banner -->
</section>
</aside>
Vários exemplos reais de uso podem ser encontrados na própria especificação, nas seções de cada elemento.
E alguém poderia me explicar regras sobre quando usar <div>
ou <section>
?
A diferença entre os dois é que o <section>
representa uma subdivisão do documento HTML5. Ele secciona o documento, dividindo-o em partes. É análago a como um livro é subdividido em capítulos e vários outros elementos pré-textuais e pós-textuais.
O <div>
simplesmente representa os elementos nele contidos. Não há nenhuma implicação na estrutura semântica do documento.
Imagine uma extensão para navegadores que delineia as páginas e mostra um sumário para o usuário para facilitar a navegação. Seria mais fácil para o programa analisar a página se suas seções estiverem claramente identificadas. Só é possível criar um sumário para os livros porque os capítulos estão claramente delineados. Se o desenvolvedor usar apenas <div>
s em sua página, o trabalho do programa fica muito mais difícil, há incerteza em relação a verdadeira estrutura do documento e isso gera a possibilidade de resultados insatisfatórios: sumários inúteis que não levam o usuário a nenhum lugar útil.