tutoriais mais recente desenvolvimento web
 

HTML <details> Tag


Exemplo

Usando o <details> elemento:

<details>
  <summary>Copyright 1999-2014.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
Tente você mesmo "

Definição e Uso

Os <details> tag especifica detalhes adicionais que o usuário pode exibir ou ocultar sob demanda.

Os <details> tag pode ser usado para criar um widget interativo que o usuário pode abrir e fechar. Qualquer tipo de conteúdo pode ser colocado no interior do <details> tag.

O conteúdo de um <details> elemento não deve ser visível a menos que o open atributo é definido.


Suporte a navegadores

Os números na tabela especificar a primeira versão do browser que suporta totalmente o elemento.

Elemento
<details> 12.0 Não suportado 48,0 6 15,0

Diferenças entre HTML 4.01 e HTML5

O <details> tag é novo em HTML5.


Dicas e Notas

Dica: O <summary> tag é usada para especificar um título visível para os detalhes.O título pode ser clicado para exibir / ocultar os detalhes.


Atributos

= Novo em HTML5.

Atributo Valor Descrição
open open Especifica que os detalhes devem ser visíveis (aberto) para o usuário

Atributos globais

O <details> tag também suporta o Global de Atributos em HTML .


Atributos de eventos

O <details> tag também suporta o evento Atributos em HTML .


Páginas relacionadas

Referência DOM HTML: Details Objeto


Configurações CSS padrão

A maioria dos navegadores irá exibir os <details> elemento com os seguintes valores padrão:

details {
    display: block;
}