8

Qual o certo para barra lateral?

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

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

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

E alguém poderia me explicar regras sobre quando usar <div> ou <section>?

1

2 Respostas 2

10

Sobre <aside>:

A especificação da W3C acerca do aside diz assim:

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 separate from that content.

Isso quer dizer que deve ser usado para reúnir conteúdo que está "tangencialmente relacionado" com a página. Eu entendo isso como widgets, links a páginas relacionadas e outros links/partes que não tenham diretamente a ver com a página.

Dito isso eu não usaria <aside> para uma sidebar senão em casos específicos de referências externas +/- relacionadas coma minha página.

Sobre <section>:

Olhando o que diz a especificação para <section>:

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

Traduzido livremente: "Um elemento que representa uma secção genérica do documento".

Sobre <div>:

O elemento <div> pode ser usado para qualquer coisa. A W3C diz exatamente isso:

The element has no special meaning at all.

Por isso usa sempre que precisares de agrupar conteúdo sem significado semântico especial.


O que usar então?

O elemento correto depende do conteúdo que estás a agrupar nessa sidebar.

Assim se tiveres dentro da sidebar:

  • links e navegação interna:

    Usa a tag <nav>. A W3C diz que a tag <nav> deve marcar uma secção com links de navegação.

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

  • links para outras página, de conteúdo mais ou menos relacionados:

    Usa a tag <aside>.

2

Em relação ao significado semântico dos elementos, a atual autoridade é a especificação do HTML5, promulgada pelo World Wide Web Consortium.

O elemento <section>

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

O elemento <aside>

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .