Dominando HTML Details e Summary

Introdução

Em HTML, a tag <summary> é utilizada para criar um elemento de resumo expansível e recolhível para o conteúdo presente na página web.

Nota: Pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, pode atualizar o separador Web 8080 para visualizar a página web.

Adicionando a tag `<details>`

Antes de adicionar a tag <summary>, precisamos criar uma seção de conteúdo que possa ser expandida ou recolhida. Para isso, usaremos a tag <details>. Adicione o seguinte código no arquivo index.html dentro da tag <body>.

<details>
  <summary>Clique em mim para ver o conteúdo</summary>
  <p>O conteúdo vai aqui.</p>
</details>

No código acima, adicionamos uma tag de resumo dentro da tag details para definir o resumo do conteúdo.

Adicionando o atributo aria-expanded

Podemos adicionar um atributo aria-expanded à tag details para fornecer o estado atual do conteúdo. Quando o conteúdo é expandido, o valor de aria-expanded será true, e quando for recolhido, o valor será false. Adicione o seguinte código após a tag <summary> para incluir o atributo aria-expanded.

<details>
  <summary aria-expanded="false">Clique em mim para ver o conteúdo</summary>
  <p>O conteúdo vai aqui.</p>
</details>

Estilizando a tag summary

A tag summary não possui atributos específicos, mas podemos estilizá-la usando CSS. Adicione o seguinte código na tag <style> para adicionar alguma estilização à tag summary.

summary {
  padding: 10px;
  background-color: #eee;
  cursor: pointer;
}

Adicionando mais conteúdo

Podemos adicionar mais conteúdo dentro da tag details, e ele será automaticamente expansível e recolhível. Adicione o seguinte código após o primeiro parágrafo para adicionar mais conteúdo.

<details>
  <summary aria-expanded="false">Clique em mim para ver o conteúdo</summary>
  <p>O conteúdo vai aqui.</p>
  <p>Mais conteúdo.</p>
  <ul>
    <li>Item da lista 1</li>
    <li>Item da lista 2</li>
  </ul>
</details>

Adicionando múltiplas seções expansíveis

Podemos adicionar múltiplas seções expansíveis à página web. Adicione o seguinte código para criar outra seção expansível.

<details>
  <summary aria-expanded="false">Outra seção</summary>
  <p>Conteúdo de outra seção</p>
</details>

Resumo

A tag <summary> pode ser usada para criar seções de conteúdo expansíveis e recolhíveis em uma página web. Podemos adicionar mais conteúdo dentro da tag details e usar estilos para personalizar a aparência da tag summary. Ao adicionar o atributo aria-expanded, podemos fornecer o estado atual do conteúdo, tornando-o acessível para usuários com deficiências.

HTML Details Summary