Html details
PRÓXIMO
Html summary
ANTERIOR
Html hr
Postado: 30 de maio de 2022
Tempo de Leitura: < 1 Minuto
Html details
A tag HTML <details> especifica detalhes adicionais que o usuário pode abrir e fechar sob demanda.
A tag <details> é frequentemente usada para criar um widget interativo que o usuário pode abrir e fechar. Por padrão, o widget é fechado. Quando aberto, ele se expande e exibe o conteúdo dentro dele.
Qualquer tipo de conteúdo pode ser colocado dentro da tag <details>.
Dica: A tag <summary> é usada em conjunto com <details>para especificar um cabeçalho visível para os detalhes.
Use 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 details.
Veja outros artigos sobre Tags HTML Lista Completa
Deixe um comentário