<details>: Elemento DETAILS
Última atualização: 2026-10-13
<details>Elemento DETAILS
Representa um widget de divulgação que pode ser aberto/fechado clicando em seu summary.
| Categoria | Semântico |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </details> tag |
| Status | Padrão |
📝 Sintaxe
<details>conteúdo recolhível</details>▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <details> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： Recolhido por padrão; adicione o atributo open para expandir inicialmente. Funciona sem JS.
❓ Perguntas Frequentes
QO que acontece se details ficar sem summary?
AO navegador usa o texto padrão (como «Detalhes» no Chrome) como controle de expansão. Para personalizar o texto do botão, é obrigatório fornecer
<summary> como primeiro filho — o que também é melhor para acessibilidade.QComo deixar details expandido por padrão?
AAdicione o atributo booleano
open a <details>: <details open> — a página carrega já expandida e o usuário ainda pode recolher clicando. Lendo e escrevendo details.open (booleano) via JS, é possível controlar programaticamente a expansão.Qdetails faz acordeão com expansão exclusiva?
A
<details> nativos são independentes, sem exclusividade mútua. A nova especificação introduziu o atributo name: <details name='faq'> com o mesmo nome formam um grupo exclusivo, com apenas um aberto por vez; navegadores antigos precisam de JS como fallback.🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
