Listas de descrição são perfeitas para apresentar termos e definições em um formato organizado e fácil de ler, como em um glossário ou dicionário real, onde você pode encontrar palavras com suas definições correspondentes. Este é um exemplo de uma lista de descrição em HTML com dois termos e seus detalhes correspondentes. Ative o editor interativo e tente descomentar o código para ver o novo item de detalhe aparecer na janela de visualização.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <!-- <dt>JS</dt>
  <dd>JavaScript</dd> -->
</dl>

Neste caso os termos são as siglas HTML e CSS e os detalhes são suas expansões. Os detalhes também podem ser definições ou outras informações relacionadas aos termos. Você precisará de três elementos HTML para definir uma lista de descrição. Primeiro, o elemento da lista de descrição, dl, que é o contêiner para toda a lista. Você pode ver que ele envolve todos os outros elementos da lista de descrição no exemplo. Então, um elemento de termo de descrição, dt, para cada termo. Neste caso a lista de descrição tem dois termos, HTML e CSS, então ela tem dois desses elementos. E finalmente, após cada termo você encontrará um elemento de detalhes de descrição, dd, para a descrição ou detalhes associados a esse termo. Neste exemplo, eles são Hypertext Markup Language e Cascading Style Sheets. No navegador, você veria cada termo seguido pela sua descrição correspondente. Por padrão, as descrições são ligeiramente mais indentadas para a direita para distingui-las visualmente. Mas listas de descrição não se limitam apenas a termos e definições. Eles são muito mais versáteis do que isso. Aqui temos uma receita com dois ingredientes. Ative o editor interativo e tente descomentar o código para ver o novo item de detalhe aparecer na janela de visualização.

<dl>
  <dt>Flour</dt>
  <dd>2 cups</dd>
  <dt>Sugar</dt>
  <dd>1/2 cup</dd>
  <!-- <dt>Vegetable Oil</dt>
  <dd>2 tablespoons</dd> -->
</dl>

A lista de descrição inteira está dentro de um elemento de lista de descrição. O primeiro ingrediente, Flour, está dentro de um elemento de termo de descrição. Então, você pode ver quanto deste ingrediente você vai precisar: 2 cups. Isto está dentro de um elemento de detalhes de descrição logo após seus respectivos ingredientes. E a mesma estrutura é repetida para Sugar. Neste caso, a receita tem apenas dois ingredientes, mas se houvesse mais a mesma estrutura poderia ser repetida ao longo da lista de descrição. No navegador, você veria os ingredientes alinhados à esquerda e as medidas indentadas para separá-los visualmente. Outros casos de uso para listas de descrição incluem especificações de produtos, perguntas frequentes, informações de contato e metadados. Essencialmente, quando você tem duas informações relacionadas no formato de par chave-valor, onde uma atua como um rótulo, a chave, e a outra atua como uma informação adicional relacionada, o valor, você pode usar uma lista de descrição.