<summary>: Elemento SUMMARY
Última atualização: 2026-10-13
<summary>Elemento SUMMARY
Como primeiro filho de details, é o título visível que o usuário clica para alternar o widget.
| Categoria | Semântico |
|---|---|
| Modelo de Conteúdo | Somente como primeiro filho de details |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </summary> tag |
| Status | Padrão |
📝 Sintaxe
<summary>título do resumo</summary>▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <summary> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： summary deve ser o primeiro filho dentro de details; sem ele, o navegador mostra um rótulo genérico.
❓ Perguntas Frequentes
Qsummary só pode ser usada dentro de details?
ASim,
<summary> só pode ser o primeiro filho de <details>; sozinha não tem sentido. Ela é a «barra de título» do painel recolhível — o comportamento de clicar para expandir/recolher é nativo do navegador, sem JS.Qsummary pode conter título e ícone?
ASim.
<summary> admite títulos e conteúdo de nível de frase, como <summary><h3>Cláusula um</h3></summary>, além de <span> com ícone. Atenção: ela sobrescreve o triângulo indicador padrão — a seta precisa ser reposta por conta própria.QComo remover a seta padrão de summary?
AVia CSS:
summary { list-style: none; }, e em motores WebKit acrescente summary::-webkit-details-marker { display: none; }. Depois use ::before/::after para um indicador personalizado, alternando a direção da seta com details[open].🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
