details e summary: acordeão sem JavaScript
Um FAQ que expande e recolhe cada pergunta costuma ser construído com JavaScript e atributos de acessibilidade manuais. O HTML já entrega isso pronto, com uma dupla de tags.
Estudar esta lição interativa →Um "acordeão" (aquele bloco de pergunta e resposta que expande ao clicar, comum em páginas de FAQ) é normalmente construído com um botão, algum CSS escondendo e mostrando conteúdo, e JavaScript trocando atributos de acessibilidade como aria-expanded a cada clique. O HTML resolve isso nativamente, sem nenhuma dessas três partes, com a dupla <details> e <summary>.
Pense numa pasta física de escritório com uma aba de identificação por fora: você vê só o título da aba até decidir abrir a pasta e olhar o conteúdo dentro. <summary> é a aba, sempre visível e clicável; <details> é a pasta inteira, que já nasce sabendo abrir e fechar sozinha, sem instrução nenhuma sua.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Clique em cada pergunta. A primeira já vem aberta, por causa do atributo open.
Vale reparar no que já vem de graça: o triângulo indicador de aberto/fechado, a navegação até o summary pelo Tab, a ativação com Enter ou Espaço, e o estado (aberto ou fechado) sendo anunciado corretamente por um leitor de tela. Tudo isso é o mesmo espírito do módulo de acessibilidade: preferir um elemento nativo que já resolve tudo sozinho, em vez de recriar manualmente, com div e JavaScript, um comportamento que o HTML já entrega pronto.
<summary> precisa ser o primeiro filho dentro de <details>, o restante do conteúdo vem depois dele. E evite colocar elementos interativos (como um <button> ou outro link) dentro do próprio <summary>: isso confunde o comportamento nativo de clique que já abre e fecha o bloco inteiro.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione um segundo details, fechado por padrão.