Lista de definições em HTML

Listas / Tutorial HTML5

O que são listas de definições?

As listas de definições são utilizadas para exibir termos seguidos de suas descrições, criando uma relação clara entre eles. No HTML, utilizamos a tag <dl> para marcar uma lista de definições, junto com <dt> e <dd> para definir os elementos internos.

Como adicionar uma lista de definições no documento HTML?

Utilize a lista de definições <dl> para representar uma lista com termos descritos. As tags envolvidas na marcação são:

TagTipo da listaOrigem do nome
<dl>Marca uma lista de definições<dl> vem de definition list
<dt>Marca um termo a ser descrito<dt> vem de definition term
<dd>Marca a descrição de um termo<dd> vem de definition description

Exemplo:

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Dicas e boas práticas

  1. Consistência: Use <dt> para marcar sempre o termo e <dd> para suas descrições.
  2. Semântica: As listas de definições são ideais para glossários, dicionários e descrições de propriedades.
  3. Estilo: Utilize CSS para melhorar a apresentação visual das listas, ajustando margens, espaçamentos e tipografia.

Exemplo:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>