Tag HTML <details>
A tag <details> exibe informações adicionais que o utilizador pode abrir e ver. Atributos da tag e exemplos práticos.
A tag <details> é um dos elementos HTML5. Ela cria um widget de revelação: um controlo interativo que o utilizador pode abrir para revelar conteúdo extra e fechar novamente para o ocultar. Por padrão, o conteúdo permanece oculto e o navegador desenha um pequeno triângulo (o marcador de revelação) que roda para indicar o estado aberto ou fechado.
O primeiro filho de <details> deve ser um elemento <summary>, que define o rótulo visível no qual o utilizador clica para alternar o widget. O <summary> é o controlo em si — o restante conteúdo dentro de <details> é o que é mostrado ou ocultado. Se omitir o <summary>, o navegador fornece um rótulo padrão como "Details".
Por que usar <details>
A grande vantagem de <details> é que proporciona um widget de mostrar/ocultar totalmente funcional sem qualquer JavaScript. O navegador trata do comportamento de abrir/fechar, do suporte ao teclado e da acessibilidade por si.
Casos de uso comuns:
- Listas de FAQ — cada pergunta é um
<summary>e a resposta é revelada ao clicar. - Revelação progressiva — oculte definições avançadas, textos legais extensos ou secções "ler mais" para que a página permaneça escaneável.
- Fallback de acordeão sem JS — como funciona sem scripting,
<details>é uma base robusta para acordeões. Mesmo que o JavaScript não carregue, o conteúdo continua acessível.
Comparado com um acordeão JavaScript construído manualmente, <details> requer menos código, é automaticamente acessível por teclado e leitor de ecrã, e degrada de forma graciosa. Recorra a um widget JS personalizado apenas quando precisar de comportamento que o elemento nativo não suporta (por exemplo, transições de altura animadas em todo o conteúdo).
Sintaxe
A tag <details> vem em pares. O conteúdo é escrito entre as tags de abertura (<details>) e de fechamento (</details>).
Exemplo da tag HTML <details>:
Tag HTML <details>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<details>
<summary>Click to see details</summary>
<p>Detailed information is here.</p>
</details>
</body>
</html>Resultado
O atributo open
Adicione o atributo boolean open para que o widget apareça expandido quando a página é carregada:
<details open>
<summary>What is HTML?</summary>
<p>HTML is the standard markup language for documents designed to be displayed in a web browser.</p>
</details>O atributo open reflete o estado atual em tempo real. Quando o utilizador alterna o widget, o navegador adiciona ou remove open no elemento automaticamente — não é necessário geri-lo manualmente. Também pode alterná-lo por script:
const details = document.querySelector('details');
details.open = true; // expand
details.open = false; // collapseLer details.open informa se o widget está atualmente aberto.
Exemplo da tag HTML <details> colocada dentro de uma tag <form>:
Tag HTML <details>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="action_form.php" method="get">
<details>
<summary>Departure airport:</summary>
<input type="text" list="airports" name="airports" />
<datalist id="airports">
<option value="Birmingham">
<option value="Cambridge">
<option value="Oxford">
<option value="Bangor">
</datalist>
<input type="submit" value="confirm" />
</details>
</form>
</body>
</html>Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| open | open | Indica que as informações na tag devem ser exibidas inicialmente de forma expandida. |
A tag <details> também suporta os Atributos Globais e os Atributos de Evento.
Como estilizar uma tag HTML <details>
details {
border: 1px solid #ccc;
border-radius: 4px;
padding: 0.5em;
}
summary {
font-weight: bold;
cursor: pointer;
}Estilizar o marcador de revelação
A maioria dos navegadores renderiza o triângulo de abrir/fechar através do pseudo-elemento ::marker no <summary>. Para alterá-lo ou removê-lo, defina list-style no summary:
/* Remove the default triangle */
summary {
list-style: none;
}
/* Replace it with your own characters */
summary::marker {
content: "▶ ";
}
details[open] summary::marker {
content: "▼ ";
}Navegadores mais antigos baseados em WebKit (Safari/Chrome antigos) usavam um pseudo-elemento não padrão summary::-webkit-details-marker. Para cobri-los, ocultá-lo também:
summary::-webkit-details-marker {
display: none;
}O evento toggle
O elemento <details> dispara um evento toggle sempre que é aberto ou fechado. Este é o ponto de ancoragem correto para carregar conteúdo de forma lazy, enviar analytics ou sincronizar o estado da interface:
const details = document.querySelector('details');
details.addEventListener('toggle', () => {
if (details.open) {
console.log('Opened');
} else {
console.log('Closed');
}
});O evento é executado após o estado já ter sido alterado, pelo que details.open reflete o novo valor dentro do handler.
Acessibilidade
O par nativo <details>/<summary> vem com acessibilidade incorporada. Os navegadores expõem o <summary> com um papel semelhante a um botão e o <details> como um group, anunciam o estado expandido/recolhido aos leitores de ecrã, e tornam o summary focável e operável com Enter e Space. Esta é uma razão fundamental para preferir o elemento nativo a um acordeão com script — obtém semântica correta e suporte a teclado gratuitamente, sem gerir aria-expanded manualmente.
Agrupamento com o atributo name
Navegadores modernos (Chrome 120+ e outros motores recentes) suportam um atributo name em <details>. Quando vários elementos <details> partilham o mesmo name, comportam-se como um grupo exclusivo, como um acordeão: abrir um fecha automaticamente os outros.
<details name="faq" open>
<summary>Question one</summary>
<p>Answer one.</p>
</details>
<details name="faq">
<summary>Question two</summary>
<p>Answer two.</p>
</details>Como esta é uma funcionalidade mais recente, os navegadores que não suportam name simplesmente ignoram-no e permitem que cada widget abra de forma independente — uma melhoria progressiva segura.
Tags relacionadas
<summary>— o rótulo visível e o controlo para um widget<details>.<dialog>— uma caixa de diálogo nativa modal ou não modal, útil quando se precisa de uma sobreposição em vez de revelação inline.