Conteúdo complementar e expansível: aside, details e summary

Além das tags semânticas para o conteúdo principal e suas seções, o HTML5 nos oferece ferramentas para lidar com informações complementares ou que precisam ser expandidas/recolhidas. As tags <aside>, <details> e <summary> são perfeitas para esses cenários, melhorando a organização e a experiência do usuário.

A tag <aside>: conteúdo complementar

A tag <aside> representa uma seção de uma página que contém conteúdo que é tangencialmente relacionado ao conteúdo ao redor, mas que pode ser considerado separado desse conteúdo. Pense nela como uma "barra lateral" ou uma "caixa de informações extras" em um jornal ou revista.

Características principais:

• Conteúdo tangencial: O conteúdo dentro de um <aside> deve ser relacionado, mas não essencial para a compreensão do conteúdo principal.
• Pode ser removido: Se você remover o <aside>, o conteúdo principal ainda deve fazer sentido.
• Contexto: O <aside> pode ser relacionado ao <body> (barra lateral global) ou a um elemento pai específico (como um <article> ou <section>).

Exemplos de uso de <aside>:

• Barras laterais: Com links relacionados, anúncios, biografia do autor.
• Caixas de citação: Citações que complementam o texto.
• Glossário: Termos e definições relacionados ao conteúdo.

<main>
  <article>
    <h2>Meu Artigo Principal</h2>
    <p>Este é o conteúdo principal do meu artigo. Ele fala sobre HTML semântico e sua importância.</p>
    <p>Continuando o texto...</p>

    <aside>
      <h3>Sobre o Autor</h3>
      <p>João Silva é um desenvolvedor web apaixonado por acessibilidade.</p>
      <p><a href="/autor/joao">Ver mais artigos de João</a></p>
    </aside>

    <p>Mais conteúdo do artigo...</p>
  </article>

  <aside>
    <h3>Links Relacionados</h3>
    <ul>
      <li><a href="#">Guia de CSS</a></li>
      <li><a href="#">Introdução ao JavaScript</a></li>
    </ul>
  </aside>
</main>

A tag <details> e <summary>: conteúdo expansível

As tags <details> e <summary> trabalham juntas para criar um widget de divulgação interativo que o usuário pode abrir e fechar. Pense nelas como uma "pergunta frequente" (FAQ) ou uma seção de "mostrar/esconder detalhes".

Como funcionam:

• <details>: É o contêiner principal para o widget. Por padrão, seu conteúdo é oculto.
• <summary>: É o cabeçalho visível do widget. Quando clicado, ele alterna a visibilidade do conteúdo dentro de <details>. Deve ser o primeiro elemento filho de <details>.
• Atributo open: Se você adicionar o atributo open à tag <details>, o conteúdo será visível por padrão.

Exemplo de uso de <details> e <summary>:

<section>
  <h2>Perguntas Frequentes</h2>

  <details>
    <summary>O que é HTML semântico?</summary>
    <p>HTML semântico é o uso de tags HTML que descrevem o propósito ou o significado do conteúdo que elas envolvem, em vez de apenas como elas devem aparecer visualmente.</p>
  </details>

  <details open>
    <summary>Por que ele é importante?</summary>
    <p>Ele melhora a acessibilidade, o SEO e a manutenção do código.</p>
  </details>

  <details>
    <summary>Posso usar CSS com tags semânticas?</summary>
    <p>Sim, todas as tags HTML podem ser estilizadas com CSS.</p>
  </details>
</section>

Benefícios de <details> e <summary>:

• Nativo do navegador: Não precisa de JavaScript para funcionar! O navegador cuida da interatividade de abrir/fechar.
• Acessibilidade: É acessível por padrão, com suporte a teclado e leitores de tela.
• Organização: Ajuda a manter a página mais limpa, mostrando apenas o essencial e permitindo que o usuário explore mais detalhes se desejar.

Resumindo

• <aside>:
  • Para conteúdo tangencialmente relacionado ao conteúdo principal.
  • Pode ser uma barra lateral, caixa de citação, biografia do autor.
  • O conteúdo principal deve fazer sentido mesmo sem o <aside>.
• <details> e <summary>:
  • Criam um widget de divulgação interativo (expansível/recolhível).
  • <summary> é o cabeçalho visível, <details> contém o conteúdo oculto.
  • Funciona nativamente no navegador, sem JavaScript.
  • Melhora a organização e a experiência do usuário para conteúdo opcional.
• Todas essas tags são elementos semânticos de bloco que contribuem para uma estrutura HTML mais rica, acessível e organizada.