Tag details no HTML: crie blocos expansíveis sem JavaScript

A +A −

O HTML5 trouxe alguns elementos nativos que simplificam muito o desenvolvimento de interfaces sem depender de bibliotecas externas. Entre eles, a tag <details> que é um canivete suiço para criar blocos de conteúdo recolhíveis (accordion) de forma simples, acessível e amigável para SEO, sem precisar de JavaScript.

Essa tag, em conjunto com <summary>, é muito utilizada em módulos de FAQ (Frequently Asked Questions) em páginas web, pois permite ao usuário expandir ou recolher dúvidas de forma intuitiva. Além disso, do ponto de vista de SEO, os FAQs são extremamente estratégicos: ajudam a capturar tráfego de cauda longa, aumentam a relevância semântica de uma página e podem gerar rich snippets no Google quando implementados com schema markup.

O que é e como funciona a tag <details>?

O <details> cria um container que pode ser aberto ou fechado pelo usuário. Dentro dele, o <summary> funciona como o título clicável.

Exemplo básico:

<details>
<summary>O que é a tag details?</summary>
<p>É um elemento do HTML5 que permite esconder e mostrar conteúdo sem usar <a href="https://www.pinkandbrain.com/elementos/javascript/" title="JavaScript">JavaScript</a>.</p></details>

<details>
<summary>O que é a tag details?</summary>
<p>É um elemento do HTML5 que permite esconder e mostrar conteúdo sem usar JavaScript.</p></details>

om apenas esse código, você já tem um acordeão funcional, acessível via teclado e rastreável pelos mecanismos de busca. Observe abaixo ele renderizado (claro, sem estilos CSS):O que é a tag details?

Por que usar <details> para formatar seu HTML?

HTML5 é vida, e essa dádiva ajuda a:

• Reduz necessidade de JavaScript: menos dependências, melhor performance.
• Acessibilidade nativa: suporte a teclado e leitores de tela.
• SEO-friendly: o conteúdo está no HTML, pode ser indexado normalmente.
• Experiência do usuário: páginas mais limpas e organizadas.

Exemplo de FAQ com <details> (semântica rica com schema também)

Abaixo um exemplo de como você pode estruturar um FAQ com HTML semântico e schema markup inline (JSON-LD) para SEO:

<section class="faq" itemscope itemtype="https://schema.org/FAQPage">
  <h2>Perguntas frequentes (FAQ)</h2>
  <ul>
    <li itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
      <details>
        <summary itemprop="name">O que é um FAQ em SEO?</summary>
        <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
          <p itemprop="text">
            FAQ significa Frequently Asked Questions (Perguntas Frequentes). 
            Em SEO, os FAQs ajudam a responder dúvidas comuns, aumentando relevância 
            semântica e a chance de aparecer em rich snippets no <a href="https://www.pinkandbrain.com/elementos/google/" title="Google">Google</a>.
          </p>
        </div>
      </details>
    </li>
    <li itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
      <details>
        <summary itemprop="name">Por que usar a tag <details> em um FAQ?</summary>
        <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
          <p itemprop="text">
            Porque ela cria um acordeão nativo sem precisar de JavaScript, 
            mantendo o conteúdo acessível e indexável para buscadores.
          </p>
        </div>
      </details>
    </li>
    <li itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
      <details>
        <summary itemprop="name">O Google lê o conteúdo dentro do <details>?</summary>
        <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
          <p itemprop="text">
            Sim. O Google já confirmou que considera o conteúdo dentro de 
            <details> para <a href="https://www.pinkandbrain.com/elementos/indexacao/" title="indexação">indexação</a> e ranqueamento, desde que seja relevante.
          </p>
        </div>
      </details>
    </li>
  </ul>
</section>

<section class="faq" itemscope itemtype="https://schema.org/FAQPage">
  <h2>Perguntas frequentes (FAQ)</h2>
  <ul>
    <li itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
      <details>
        <summary itemprop="name">O que é um FAQ em SEO?</summary>
        <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
          <p itemprop="text">
            FAQ significa Frequently Asked Questions (Perguntas Frequentes). 
            Em SEO, os FAQs ajudam a responder dúvidas comuns, aumentando relevância 
            semântica e a chance de aparecer em rich snippets no Google.
          </p>
        </div>
      </details>
    </li>
    <li itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
      <details>
        <summary itemprop="name">Por que usar a tag <details> em um FAQ?</summary>
        <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
          <p itemprop="text">
            Porque ela cria um acordeão nativo sem precisar de JavaScript, 
            mantendo o conteúdo acessível e indexável para buscadores.
          </p>
        </div>
      </details>
    </li>
    <li itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
      <details>
        <summary itemprop="name">O Google lê o conteúdo dentro do <details>?</summary>
        <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
          <p itemprop="text">
            Sim. O Google já confirmou que considera o conteúdo dentro de 
            <details> para indexação e ranqueamento, desde que seja relevante.
          </p>
        </div>
      </details>
    </li>
  </ul>
</section>

Como ficou:

Perguntas frequentes (FAQ)

• O que é um FAQ em SEO?FAQ significa Frequently Asked Questions (Perguntas Frequentes). Em SEO, os FAQs ajudam a responder dúvidas comuns, aumentando relevância semântica e a chance de aparecer em rich snippets no Google.
• Por que usar a tag <details> em um FAQ?Porque ela cria um acordeão nativo sem precisar de JavaScript, mantendo o conteúdo acessível e indexável para buscadores.
• O Google lê o conteúdo dentro do <details>?Sim. O Google já confirmou que considera o conteúdo dentro de <details> para indexação e ranqueamento, desde que seja relevante.

SEO: o que considerar?

É o famoso mamão com açucar da formatação HTML:

• O conteúdo dentro de <details> está no HTML e tende a ser rastreável normalmente.
• Use <summary> claros e descritivos; eles funcionam como títulos locais.
• Evite esconder informações essenciais à intenção de busca; use para conteúdo complementar.
• Estruture com headings e outras tags semânticas dentro do conteúdo expandido quando houver seções longas e potencializar a semântica para SEO

Exemplo de card de produto com formatação rica inserida na tag tag <details>:

Estrutura de FAQ no Codepen:

Acessibilidade e UX

Além de tudo que já trouxemos, a experiência dos usuários é sempre favorecida:

• O controle é focável e operável via teclado.
• Forneça textos de <summary> específicos, não genéricos (“Clique para abrir”).
• Evite aninhar muitos <details> dentro de <details> para não criar labirintos de navegação.
• Para páginas com muitos blocos, considere abrir o primeiro por padrão com open e deixar o restante recolhido.

Compatibilidade

O suporte é amplo nos navegadores modernos. Em ambientes muito legados, o conteúdo ainda aparece visível, o que é aceitável do ponto de vista de progressive enhancement.

Você conheceu um acordeão nativo, acessível e amigável para fins de SEO, eliminando a necessidade de JavaScript para o caso mais comum de conteúdo colapsável. Use-o sem moderação e potencialize sua estrutura semântica.