Html summary

Postado: 30 de maio de 2022

Html summary

O elemento HTML <summary> é utilizado como um sumário ou legenda para o conteúdo de um elemento <details>.

A tag <summary> define um cabeçalho visível para o elemento <details> . 

Nota: O elemento <summary> deve ser o primeiro elemento filho do elemento <details>.

O título pode ser clicado para visualizar/ocultar os detalhes.

Veja no código HTML abaixo.

<details>

  <summary>Códigos HTML Prontos</summary>
  <p>
      Sigla para HyperText Markup Language - Linguagem de Marcação de Hipertexto -, o HTML é o 
      componente base da web. Isso quer dizer que ele permite a construção de 
      websites e a inserção de novos conteúdos, como imagens e vídeos, por meio dos hipertextos.
   </p>

</details>

<details>

<summary>Códigos CSS Prontos</summary>
  <p>
      CSS é a sigla para Cascading Style Sheets, ou seja, Folhas de Estilo em Cascatas. 
      É uma maneira de dar estilo ao código criado por linguagens como HTML, XML ou XHTML, por exemplo. 
      De forma prática, ela funciona como uma camada de personalização ao conteúdo visível.
   </p>

</details>

Veja na Pratica

Clique Aqui – Tags Html summary

O título que você clicou Tags Html summary exibi o conteúdo na tag detalhes.
Ou seja aqui.

Use o CSS para estilizar <details> e <summary>

<html>
<style>

  details > summary {
  padding: 5px;
  width: 300px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}

details > p {
  background-color: #eeeeee;
  padding: 5px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>

<body>

<details>
  <summary>Códigos Html</summary>
  <p>
      Sigla para HyperText Markup Language - Linguagem de Marcação de Hipertexto -, o HTML é o 
      componente base da web. Isso quer dizer que ele permite a construção de 
      websites e a inserção de novos conteúdos, como imagens e vídeos, por meio dos hipertextos.
   </p>
</details>

</body>
</html>

Neste artigo abordamos sobre a tag Html summary.

Veja outros artigos sobre Tags HTML Lista Completa

Publicado por: loopnerd

149 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.

Artigos Relacionados