Html | tag de detalhes

Organizar dados em um site é uma tarefa crucial. Mais especificamente, quando adicionamos um texto grande, a organização dos dados ajuda a evitar problemas de legibilidade para os usuários. Em outro cenário, o usuário deseja ver apenas as informações quando clica em uma seção específica. Para esse fim, o html “<Detalhes>”A tag é utilizada, que pode ser clicada para ver ou ocultar os detalhes. Além disso, a etiqueta de resumo adicionada na tag Detalhes é usada para adicionar títulos visíveis.

Este tutorial fornecerá um guia detalhado sobre a tag html.

Como usar a tag html?

Para usar a tag html, siga a sintaxe fornecida:

Alguns cabeçalham

Contente…

Na sintaxe acima mencionada:

• é a tag de partida.
• A tag é utilizada para especificar um título visível para os detalhes.
• é a etiqueta de fechamento.

• tag especifica algum conteúdo do parágrafo para a página.

• é a etiqueta de fechamento.
• é a etiqueta de fechamento.

Exemplo: como inserir elemento em html?

Primeiro, adicione/crie um elemento div com um nome de classe “Desc”Em html. Dentro deste elemento div, adicione

Elemento para especificar algum conteúdo do parágrafo, como mostrado abaixo:

Aqui está a lista de tags HTML com seus detalhes:

Dentro deste elemento div, adicione quantos detalhes você quiser. Aqui neste exemplo, adicionaremos três tags de detalhes junto com a tag html e

marcação:

Tag HTML BR

A tag html BR é utilizada para adicionar uma quebra de linha.

HTML Head Tag

A etiqueta de cabeça HTML é utilizada para segurar os metadados.

Tag html p

A tag html p é utilizada para adicionar um parágrafo.

O código fornecido acima resultará na saída correspondente:

Então, sim, a estrutura foi concluída, agora, eles aplicam algumas propriedades CSS para um layout melhor.

Estilo “desc” div

.desced (
Altura: 250px;
margem: 0px automático;
borda: 3px Solid #9C2C77;
largura: 80%;
preenchimento: 5px 10px;
Size da fonte: 16px;
Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;
Background-Color: #f2c0f5;

O elemento div tendo classe “Desc”É aplicado com as seguintes propriedades:

• ““altura”A propriedade é utilizada para o cenário da altura do elemento.
• ““margem”Propriedade com o valor definido como '0px Auto”Indica o espaço de 0px no fundo superior e igual no lado esquerdo-direito.
• ““fronteira”Propriedade com o valor definido como“3px cinza sólido”Define a largura da linha de fronteira como 3px, estilo de borda sólida e a cor da borda.
• ““largura”A propriedade é usada para definir/ajustar a largura do elemento.
• ““preenchimento”Propriedade com o valor definido como“5px 10px"Indica"5px”Espaço no fundo e“10px”Espaço na esquerda-direita do conteúdo do elemento.
• ““tamanho da fonte”O atributo especifica o tamanho da fonte de um elemento.
• ““família de fontes”Está definido com a lista de estilos de fonte para garantir que, se uma família de fontes não for apoiada pelo navegador, outros serão aplicados.
• ““cor de fundo”A propriedade está definida para especificar a cor de fundo do elemento.

Elemento de "detalhes" do estilo

detalhes
Cursor: Ponteiro;
Fonte-família: cursiva;

O elemento de detalhes HTML é aplicado com as seguintes propriedades:

• ““cursor”Propriedade com o valor definido como o“ponteiro”Mudará o cursor do mouse como uma mão apontadora ao passar o mouse no conteúdo do elemento.
• ““família de fontes”Propriedade atribuída com o valor“cursivo”, Especificando o texto em estilo cursivo.

Elemento de "resumo" de estilo

resumo
intensidade da fonte: Negrito;

A tag de resumo é aplicada com o “espessura da fonte”Propriedade com o valor“audacioso”.

O código acima fornecerá resultados como mostrado na imagem abaixo:

É assim que podemos implementar o elemento html.

Conclusão

Enquanto desenvolve um site, é necessário colocar dados de maneira organizada. Especialmente quando um texto longo é colocado em um site, pode causar problemas na leitura, rastreamento de informações e mais. A tag html é utilizada para organizar dados e fornece a funcionalidade para ocultar ou ver os detalhes do clique. Este blog demonstrou a tag html com um exemplo prático.