Html summary
Postado: 30 de maio de 2022
Tempo de Leitura: < 1 Minuto
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: Loop Nerd
542 Visualizações
Deixe um comentário