Carregando...

Html details

Postado: 30 de maio de 2022

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

Publicado por: Loop Nerd

322 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados