A lista de descrição fornece uma maneira semântica de estruturar e apresentar informações criando um relacionamento entre os termos e suas descrições correspondentes. Isso torna os dados ou informações mais acessíveis e compreensíveis. Os criadores podem utilizar listas de descrição em locais como glossários, dicionários, seções de perguntas frequentes, especificações do produto, etc. Este artigo demonstra o procedimento para usar uma lista de descrição em HTML.
Como usar a lista de descrição em HTML?
A lista de descrição consiste em “ ”, “ ', e ' ” e é usado para representar uma coleção de termos e suas definições correspondentes. Apresenta/exibe o conteúdo de forma estruturada na qual a descrição vai além de uma simples lista de marcadores. As propriedades CSS também podem ser aplicadas à lista de descrição para criar uma interface visualmente atraente.
Visite o trecho de código abaixo para criar uma lista de descrição em HTML:
< corpo >
< div >
< h2 > Participação no mercado de laptops h2 >
< dl >
< dt > HP dt >
< dd > Na categoria Desktop Systems e laptops tem uma participação de 30 % dd >
< dt > Dell dt >
< dd > Na categoria Desktop Systems e laptops tem uma participação de 24 % dd >
< dt > lenovo dt >
< dd > Na categoria Desktop Systems e laptops tem uma participação de 14 % dd >
dl >
div >
corpo >
A explicação do trecho de código acima:
-
- A princípio, o pai “ div ” Foi criado um elemento que atua como um contêiner para o elemento da lista de descrição e outros elementos HTML como “ ”.
- Em seguida, a lista de descrição “
- Em seguida, o nome/termo da descrição “ ” é usada para definir a descrição dos itens cuja descrição será adicionada.
- Depois disso, os dados da descrição “ ” é inserida a tag que contém a descrição/informações relacionadas ao item de descrição.
Após o final da fase de compilação, os elementos HTML aparecem na página da web assim:
A saída mostra que a lista de descrição foi gerada.
Exemplo 1: atribuir várias descrições a um único termo
A tabela de descrição pode ser criada na qual há mais de uma descrição para um único termo. Pode ser particularmente útil se houver mais de um significado ou método pelo qual o termo descritivo possa ser explicado.
O código para o cenário acima é mostrado abaixo:
< div >< h2 > Participação no mercado de laptops h2 >
< dl >
< dt > HP dt >
< dd > Na categoria Desktop Systems e laptops tem uma participação de 30 % em 2018 dd >
< dd > Na categoria Desktop Systems e laptops tem uma participação de 23 % em 2017 dd >
< dt > Dell dt >
< dd > Na categoria Desktop Systems e laptops tem uma participação de 24 % em 2018 dd >
< dd > Na categoria Desktop Systems e laptops tem uma participação de 27 % em 2017 dd >
< dt > lenovo dt >
< dd > Na categoria Desktop Systems e laptops tem uma participação de 14 % em 2018 e 9 % em 2017 dd >
dl >
div >
No código acima:
-
- Primeiro, a lista de descrição é criada com a ajuda de “ dl ”, “ dt ' e ' dd ” elementos.
- Em seguida, vários “ ” tags são utilizadas em um único “ dt ' elemento. Ele atribui várias descrições a um único termo.
Após a fase de compilação:
A saída mostra que várias descrições foram incluídas para um único termo.
Exemplo 2: atribuir vários termos a uma única descrição
Os desenvolvedores também podem criar uma lista de descrição que consiste em vários termos de descrição com dados de descrição única. É especialmente útil quando vários termos são semelhantes ou têm a mesma funcionalidade. Ao usar essa técnica, todos esses termos podem ser descritos de uma só vez:
< div estilo = 'margem: 20px' >< h2 > Participação no mercado de laptops h2 >
< dl >
< dt > HP dt >
< dt > EliteBook dt >
< dt > proBook dt >
< dd > Na categoria Desktop Systems e laptops tem uma participação de 30 % em 2018 dd >
< dd > Na categoria Desktop Systems e laptops tem uma participação de 23 % em 2017 dd >
< dt > lenovo dt >
< dd > Na categoria Desktop Systems e laptops tem uma participação de 14 % em 2018 e 9 % em 2017 dd >
dl >
div >
No bloco de código acima, a lista de descrição é criada e vários “ ” tags são utilizadas com um único “ ' marcação.
Após o final da fase de compilação:
O instantâneo acima mostra que vários termos são atribuídos com dados de descrição única.
Conclusão
A lista de descrição é criada usando a lista de descrição “ ” que cria o contêiner para os itens da lista e sua descrição. Além disso, o “ ” denota o nome do item cuja descrição será fornecida. Enquanto o ' ” armazena a descrição correspondente. Este artigo demonstrou a utilização de uma lista de descrição em HTML.