O que os elementos `
` e `
` fornecem?

Question

O que os elementos `

` e `

` fornecem?

Accepted Answer

`

` e `

` criam um **widget de divulgação nativa** — uma seção expansível/recolhível — com **zero JavaScript**. O navegador lida com a alternância, suporte de teclado e acessibilidade para você. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** é o rótulo clicável (o primeiro filho). - Tudo depois é o conteúdo recolhível. - Clicar no resumo alterna aberto/fechado — nativamente acessível por teclado (Enter/Space) e anunciado corretamente pelos leitores de tela. ## Por que isso importa ```html

FAQ item

Answer...

``` ```js const d = document.querySelector("details"); d.open; // boolean: is it open? d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close ``` ## Estilizando o marcador ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Casos de uso reais Acordeons FAQ, seções "mostrar mais", barras laterais recolhíveis, texto de spoiler, linhas de tabela expansíveis. Antes deste elemento, cada acordeão precisava de JavaScript mais fiação ARIA para acessibilidade — agora são apenas duas tags semânticas. ## Por que isso importa `

`/`

` lhe dão conteúdo recolhível acessível e amigável ao teclado sem JS e sem ARIA manual — um exemplo perfeito de uso da plataforma. Use-o para FAQs e padrões de "mostrar mais" antes de criar um acordeão personalizado.