Tag dl do HTML - Aprenda HTML

A tag HTML <dl> define uma lista de descrição (anteriormente chamada de lista de definições). Ela agrupa termos e suas descrições em pares nome–valor. O elemento <dl> é o contêiner; dentro dele, cada tag <dt> especifica um termo (o nome), e cada tag <dd> especifica a descrição desse termo (o valor).

Esta página aborda quando usar <dl> em vez de uma lista não ordenada ou lista ordenada, como agrupar itens para estilização e microdados, como a marcação se comporta para acessibilidade, e exemplos executáveis para os padrões mais comuns.

Quando usar `<dl>`

Use uma lista de descrição sempre que o conteúdo for um conjunto de pares nome–valor em vez de uma sequência simples de itens. Recorra ao <dl> para:

Glossários e dicionários — um termo seguido de sua definição.
FAQs — cada pergunta é um <dt>, cada resposta é um <dd>.
Metadados — pares chave–valor como Autor, Publicado, Status.
Diálogos ou roteiros — o falante é o termo, a fala é a descrição.
Especificações de produto — Peso, Dimensões, Material, cada um com um valor.

Prefira <ul> quando os itens não têm ordem inerente e nenhum valor associado, e <ol> quando a ordem ou numeração importa. A característica definidora do <dl> é o emparelhamento de um nome com um ou mais valores.

Não use <dl> apenas para recuar texto. Ele carrega significado semântico, e usá-lo para layout visual obscurece esse significado. Para recuar conteúdo visualmente, use as propriedades CSS margin ou padding.

Sintaxe

A tag <dl> vem em pares. Os termos e descrições são escritos entre as tags de abertura (<dl>) e fechamento (</dl>).

Exemplo da tag HTML `<dl>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <dl>
      <dt>Hypertext</dt>
      <dd>A system of text pages that have cross-references.</dd>
      <dt>Hyperlink</dt>
      <dd>A part of a hypertext document that references another item.</dd>
    </dl>
  </body>
</html>

Experimente Você Mesmo »

Múltiplos termos e descrições

Um único <dt> pode ter várias descrições <dd>, e vários termos <dt> podem compartilhar uma descrição <dd>. Isso permite modelar sinônimos, alternativas e definições agrupadas.

<dl>
  <!-- One term, multiple descriptions -->
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform web browser.</dd>
  <dd>Developed and maintained by the Mozilla Foundation.</dd>

  <!-- Multiple terms sharing one description -->
  <dt>JS</dt>
  <dt>JavaScript</dt>
  <dt>ECMAScript</dt>
  <dd>The programming language of the web.</dd>
</dl>

Agrupando pares com `<div>`

O HTML5 permite envolver cada grupo nome–valor em um <div> colocado diretamente dentro do <dl>. Isso é uma marcação válida e é útil quando você quer:

aplicar CSS a um par inteiro de uma vez (por exemplo, com Flexbox ou CSS Grid),
anexar microdados ou atributos globais como class ou data-* a um grupo específico.

O <div> é o único elemento, além de <dt> e <dd>, permitido como filho direto de <dl>.

<dl>
  <div class="row">
    <dt>Name</dt>
    <dd>Ada Lovelace</dd>
  </div>
  <div class="row">
    <dt>Field</dt>
    <dd>Mathematics</dd>
  </div>
  <div class="row">
    <dt>Known for</dt>
    <dd>The first published algorithm for a computer.</dd>
  </div>
</dl>

.row {
  display: flex;
  gap: 1rem;
}
.row dt {
  width: 8rem;
  font-weight: bold;
}

Acessibilidade

Uma lista de descrição é uma forma acessível de expor relações chave–valor, mas somente quando a marcação é usada semanticamente.

Os elementos <dt> têm um papel implícito de term e os elementos <dd> têm um papel implícito de definition, portanto as tecnologias assistivas entendem qual item é o nome e qual é o valor.
Os leitores de tela geralmente anunciam uma contagem, como "lista de descrição, 3 termos", e depois leem cada termo seguido de sua descrição. O emparelhamento deve ser óbvio apenas pelo texto, portanto escreva cada <dd> de modo que sua relação com o <dt> precedente fique clara fora de contexto.
O agrupamento opcional com <div> não quebra isso. Os papéis term e definition ainda se aplicam porque os elementos <dt> e <dd> permanecem descendentes válidos do <dl>.

Atributos

A tag <dl> suporta os Atributos Globais e os Atributos de Evento.

Como estilizar a tag HTML `<dl>`

Por padrão, os navegadores recuam cada <dd> e empilham termos e descrições verticalmente. Você pode redefinir e reestilizá-los com CSS:

dl {
  margin: 0;
  padding: 0;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 20px;
}

Prática

Quais afirmações sobre a tag HTML dl estão corretas?

A tag dl cria uma lista de descrição de pares de termos e valores.A tag dl é usada para criar uma lista suspensa em HTML.A tag dt especifica um termo e a tag dd especifica sua descrição dentro de um dl.A tag dl não pode ser combinada com nenhuma outra tag.Um div pode agrupar um par dt e dd como filho direto de dl em HTML5 válido.Um único dt só pode ter exatamente um dd.

Quando usar <dl>