Detalhes da tag HTML com exemplos

Tag de detalhes HTML – o que é?

Hoje, abordaremos os detalhes da tag Html . Ao usar exemplos , antecipamos o cumprimento dos objetivos de aprendizagem.

A tag HTML <details> é usada para criar um widget de divulgação ou uma seção recolhível que pode ser expandida ou reduzida pelo usuário. Essa tag costuma ser usada para criar perguntas frequentes, manuais do usuário ou outras seções de conteúdo que podem ser longas ou exigir explicações adicionais.

Os detalhes da tag HTML incluem detalhes que o usuário final pode abrir e fechar a pedido:

Example

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<details>
<summary>Yellowstone National Park</summary>
<p>Yellowstone National Park is an American national park located in the western United States, largely in the northwest corner of Wyoming and extending into Montana and Idaho. It was established by the 42nd U.S. Congress with the Yellowstone National Park Protection Act and signed into law by President Ulysses S. Grant on March 1, 1872.</p>
</details>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Example:

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><style><br>details > summary {<br>padding: 4px;width: 180px;<br>background-color: #A38F7B;<br>border: none;<br>box-shadow: 2px 2px 3px #bbbbbb;<br>cursor: pointer;<br>}<br>details > p {<br>background-color: #008080;<br>padding: 5px;<br>margin: 0;<br>box-shadow: 2px 2px 3px #bbbbbb;<br>}<br></style><br><br><details><br><summary>Yellowstone National Park</summary><br><p>Yellowstone National Park is an American national park located in the western United States, mainly in the northwest corner of Wyoming and extending into Montana and Idaho. It was established by the 42nd U.S. Congress with the Yellowstone National Park Protection Act and signed into law by President Ulysses S. Grant on March 1, 1872.</p><br></details><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Tag de Detalhes HTML – O que é?:
Usos e Definição:
Compatibilidade do navegador:
Atributos:
Atributos do evento:
Atributos Globais:
Configurações padrão de CSS:
Vantagens da tag de detalhes HTML:

Usos e Definição

Os detalhes da tag HTML ou a tag <details> fornecem informações extras que podem ser visualizadas e fechadas mediante solicitação.

A tag <details> é frequentemente usada para criar widgets que os usuários podem abrir e fechar.

As configurações padrão fecham o widget. Ele se expande e exibe o conteúdo interno assim que é aberto nos detalhes da tag Html .

Dentro da tag <details> , você pode incluir qualquer conteúdo.

Conselho: A tag de resumo é usada junto com a tag de detalhes para indicar um cabeçalho preciso para as informações.

Compatibilidade do navegador

Na tabela a seguir, os números indicam a versão do navegador compatível com o elemento no Tag Details .

Elemento
<detalhes>	12,0	79,0	49,0	6.0	15,0

Atributos

Atributo	Valor	Visão geral
abrir	abrir	Garante que os detalhes estejam visíveis (abertos) para o usuário.

Atributos do Evento

Os detalhes da tag do HTML <details> também funcionam com os atributos do evento .

Atributos Globais

Os Atributos Globais do HTML são apoiados pelos Detalhes da Tag <details> .

Configurações padrão de CSS

O elemento <details> é frequentemente gerado com os valores padrão fornecidos:

details {
display: block;
}

Vantagens da tag de detalhes HTML

A tag HTML <details> é uma ferramenta versátil que pode fornecer várias vantagens quando usada corretamente. Aqui estão algumas vantagens de usar a tag <details>:

A tag <details> oferece aos usuários a capacidade de expandir ou recolher seletivamente seções de conteúdo, facilitando a localização das informações que procuram. Isso pode melhorar a experiência geral do usuário, fornecendo uma experiência de navegação mais simplificada e intuitiva.
Ao recolher as seções de conteúdo que não são imediatamente relevantes, a tag <details> pode ajudar a economizar espaço na página e evitar que o usuário se sinta sobrecarregado com a quantidade de informações apresentadas.
A tag <details> também pode ajudar a melhorar a acessibilidade de sua página da Web, fornecendo uma hierarquia de informações clara e estruturada. Leitores de tela e outras tecnologias assistivas podem usar essas informações para fornecer uma melhor experiência de usuário para usuários com deficiências.
A tag <details> pode ser estilizada e personalizada usando CSS, permitindo que você crie um conteúdo visualmente atraente e envolvente em sua página da web. Você pode usar diferentes estilos, fontes e cores para destacar seu conteúdo e chamar a atenção do usuário.

Se você achar este artigo útil, assine nosso boletim informativo abaixo para se conectar com as informações técnicas mais recentes deste site.

Nós valorizamos o seu feedback.