Listas de definição: dl, dt e dd

Conheça um tipo especial de lista ideal para criar glossários, dicionários e pares de termo e descrição.

Você já conhece <ul> para listas sem ordem e <ol> para listas com ordem. Mas existe um terceiro tipo de lista no HTML — menos conhecido, porém extremamente útil — para um caso de uso específico: pares de termo e descrição.

Glossários, dicionários, especificações técnicas, metadados de artigos, perguntas frequentes — todos esses cenários têm em comum uma estrutura de pergunta e resposta ou rótulo e valor. Para isso existe a lista de definição.

As três tags da lista de definição

A lista de definição é formada por três tags que trabalham sempre juntas:

Tag Nome completo Papel
<dl> definition list O contêiner da lista
<dt> definition term O termo sendo definido
<dd> definition description A descrição do termo 
<dl>
  <dt>HTML</dt>
  <dd>Linguagem de marcação usada para estruturar
      o conteúdo de páginas web.</dd>

  <dt>CSS</dt>
  <dd>Linguagem de estilos usada para definir a
      aparência visual de elementos HTML.</dd>

  <dt>JavaScript</dt>
  <dd>Linguagem de programação que adiciona
      comportamento e interatividade às páginas web.</dd>
</dl>

O navegador renderiza cada <dd> com um recuo à esquerda em relação ao <dt>, criando a hierarquia visual de termo e descrição:

HTML
    Linguagem de marcação usada para estruturar
    o conteúdo de páginas web.

CSS
    Linguagem de estilos usada para definir a
    aparência visual de elementos HTML.

JavaScript
    Linguagem de programação que adiciona
    comportamento e interatividade às páginas web.

A estrutura interna do dl

O <dl> aceita apenas <dt> e <dd> como filhos diretos válidos — além de <div> agrupador, que veremos adiante.

A estrutura mais comum é um <dt> seguido de um <dd>, mas o HTML permite variações:

Um termo, uma descrição — o padrão

<dl>
  <dt>Front-end</dt>
  <dd>A parte visual e interativa de uma aplicação web,
      que roda no navegador do usuário.</dd>
</dl>

Um termo, múltiplas descrições

Um mesmo termo pode ter mais de uma descrição — como um verbete de dicionário com múltiplos significados:

<dl>
  <dt>Cache</dt>
  <dd>Armazenamento temporário de dados para acelerar
      acessos futuros.</dd>
  <dd>Área de memória rápida usada pelo processador
      para guardar instruções frequentes.</dd>
  <dd>Mecanismo do navegador para guardar arquivos
      de sites já visitados.</dd>
</dl>

Múltiplos termos, uma descrição

Sinônimos ou variações de um mesmo conceito podem compartilhar uma única descrição:

<dl>
  <dt>www</dt>
  <dt>World Wide Web</dt>
  <dt>Web</dt>
  <dd>Sistema de documentos interligados e acessíveis
      via internet usando o protocolo HTTP.</dd>
</dl>

Múltiplos termos, múltiplas descrições

<dl>
  <dt>Node.js</dt>
  <dt>Node</dt>
  <dd>Ambiente de execução JavaScript fora do navegador,
      construído sobre o motor V8 do Chrome.</dd>
  <dd>Permite criar servidores, ferramentas de linha
      de comando e aplicações back-end com JavaScript.</dd>
</dl>

Quando usar dl

A lista de definição é semanticamente correta para qualquer estrutura de rótulo e valor — não apenas glossários:

Glossário ou dicionário

<h2>Glossário de termos HTML</h2>

<dl>
  <dt>Elemento</dt>
  <dd>Componente da linguagem HTML formado por uma tag
      de abertura, conteúdo e tag de fechamento.</dd>

  <dt>Atributo</dt>
  <dd>Informação adicional inserida dentro da tag de
      abertura de um elemento, como src, href ou alt.</dd>

  <dt>Tag void</dt>
  <dd>Elemento HTML que não tem tag de fechamento nem
      conteúdo, como img, br e hr.</dd>

  <dt>Semântica</dt>
  <dd>Uso de tags HTML de acordo com o significado do
      conteúdo que representam, não apenas pela aparência
      visual que produzem.</dd>
</dl>

Especificações técnicas de produto

<h2>Especificações — Notebook DevPro X1</h2>

<dl>
  <dt>Processador</dt>
  <dd>Intel Core i7-1365U, 10 núcleos, até 5.2 GHz</dd>

  <dt>Memória RAM</dt>
  <dd>16 GB DDR5 — expansível até 64 GB</dd>

  <dt>Armazenamento</dt>
  <dd>512 GB SSD NVMe PCIe 4.0</dd>

  <dt>Tela</dt>
  <dd>14 polegadas IPS, resolução 2560×1600, 120 Hz</dd>

  <dt>Bateria</dt>
  <dd>72 Wh — até 12 horas de uso</dd>

  <dt>Sistema operacional</dt>
  <dd>Ubuntu 24.04 LTS</dd>
</dl>

Metadados de artigo ou post

<article>
  <h1>Guia completo de HTML semântico</h1>

  <dl>
    <dt>Autor</dt>
    <dd>Ana Silva</dd>

    <dt>Publicado em</dt>
    <dd><time datetime="2026-05-27">27 de maio de 2026</time></dd>

    <dt>Atualizado em</dt>
    <dd><time datetime="2026-05-27">27 de maio de 2026</time></dd>

    <dt>Tempo de leitura</dt>
    <dd>12 minutos</dd>

    <dt>Categorias</dt>
    <dd>HTML</dd>
    <dd>Acessibilidade</dd>
    <dd>Boas práticas</dd>
  </dl>

  <p>Conteúdo do artigo...</p>
</article>

Perguntas frequentes (FAQ)

<section>
  <h2>Perguntas frequentes</h2>

  <dl>
    <dt>Preciso saber programar para fazer o curso?</dt>
    <dd>Não! O curso foi desenvolvido para iniciantes
        absolutos. Começamos do zero e evoluímos
        gradualmente.</dd>

    <dt>Quanto tempo tenho acesso ao conteúdo?</dt>
    <dd>O acesso é vitalício — uma vez matriculado,
        você pode assistir às aulas quando e quantas
        vezes quiser.</dd>

    <dt>O certificado é reconhecido pelo mercado?</dt>
    <dd>Nosso certificado é aceito por empresas parceiras
        e pode ser adicionado ao seu perfil no LinkedIn.</dd>

    <dt>Posso acessar pelo celular?</dt>
    <dd>Sim! A plataforma é totalmente responsiva e
        funciona em qualquer dispositivo — computador,
        tablet ou smartphone.</dd>
  </dl>
</section>

Contatos e informações de empresa

<address>
  <dl>
    <dt>Endereço</dt>
    <dd>Av. Paulista, 1000 — Bela Vista</dd>
    <dd>São Paulo — SP, 01310-100</dd>

    <dt>Telefone</dt>
    <dd><a href="tel:+551133334444">(11) 3333-4444</a></dd>

    <dt>WhatsApp</dt>
    <dd>
      <a href="https://wa.me/5511999998888"
         target="_blank"
         rel="noopener noreferrer">
        (11) 99999-8888
      </a>
    </dd>

    <dt>E-mail</dt>
    <dd>
      <a href="mailto:contato@empresa.com">
        contato@empresa.com
      </a>
    </dd>

    <dt>Horário de atendimento</dt>
    <dd>Segunda a sexta, das 9h às 18h</dd>
    <dd>Sábados, das 9h às 13h</dd>
  </dl>
</address>

Agrupando com div dentro do dl

O HTML5 permite usar <div> como agrupador de pares <dt>/<dd> dentro de <dl>. Isso facilita estilização com CSS — como criar cards ou linhas alternadas:

<dl>
  <div>
    <dt>Plano Básico</dt>
    <dd>Acesso aos módulos introdutórios</dd>
    <dd>Suporte via fórum da comunidade</dd>
  </div>

  <div>
    <dt>Plano Pro</dt>
    <dd>Acesso a todos os módulos</dd>
    <dd>Projetos com feedback individual</dd>
    <dd>Suporte prioritário via chat</dd>
  </div>

  <div>
    <dt>Plano Equipes</dt>
    <dd>Tudo do Plano Pro para até 10 pessoas</dd>
    <dd>Painel de acompanhamento de progresso</dd>
    <dd>Treinamentos exclusivos ao vivo</dd>
  </div>
</dl>

💡 O <div> agrupador dentro de <dl> é o único elemento além de <dt> e <dd> permitido como filho direto do <dl>. Ele não altera a semântica — apenas agrupa pares para facilitar o CSS.

O que NÃO fazer com dl

<!-- ❌ Usar dl apenas para criar recuo visual -->
<dl>
  <dt>Bem-vindo ao curso!</dt>
  <dd>Aqui você aprenderá HTML do zero.</dd>
  <dd>Ao seu ritmo, sem pressão.</dd>
</dl>
<!-- Esse conteúdo é um título e parágrafos —
     não uma lista de definição -->

<!-- ✅ Use os elementos corretos -->
<h2>Bem-vindo ao curso!</h2>
<p>Aqui você aprenderá HTML do zero.</p>
<p>Ao seu ritmo, sem pressão.</p>

<!-- ❌ Usar dl para uma lista comum de itens equivalentes -->
<dl>
  <dt>HTML</dt>
  <dt>CSS</dt>
  <dt>JavaScript</dt>
</dl>
<!-- Sem dd, não há relação de definição — use ul -->

<!-- ✅ Use ul para itens sem definição -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- ❌ Colocar dd antes de dt -->
<dl>
  <dd>Descrição sem termo</dd>
  <dt>Termo</dt>
</dl>

<!-- ✅ dt sempre antes do dd correspondente -->
<dl>
  <dt>Termo</dt>
  <dd>Descrição do termo</dd>
</dl>

dl e acessibilidade

Leitores de tela identificam <dl> e comunicam a relação entre termos e descrições ao usuário:

"lista de definição, 3 itens"
"termo: HTML"
"descrição: Linguagem de marcação..."
"termo: CSS"
"descrição: Linguagem de estilos..."

Isso é mais informativo do que simplesmente ler um parágrafo de texto — o usuário sabe que está navegando em uma estrutura de pares relacionados.

💡 O suporte de leitores de tela para <dl> varia entre tecnologias e navegadores. Em casos onde a relação entre rótulo e valor é crítica para o entendimento — como formulários —, complementar com aria-labelledby pode garantir uma experiência mais consistente.

Comparativo: dl vs. table para dados em pares

Uma dúvida comum é se dados em pares de rótulo/valor devem usar <dl> ou <table>:

Critério <dl> <table>
Natureza Termos e suas descrições Dados tabulares com múltiplas colunas
Comparação Não é o foco Facilita comparação entre linhas
Semântica Definição e descrição Relacionamento entre dados em grade
Exemplo Especificações de um produto Comparação entre múltiplos produtos 
<!-- ✅ dl: especificações de UM produto -->
<dl>
  <dt>RAM</dt>
  <dd>16 GB</dd>
  <dt>Armazenamento</dt>
  <dd>512 GB</dd>
</dl>

<!-- ✅ table: comparação entre MÚLTIPLOS produtos -->
<table>
  <thead>
    <tr>
      <th>Especificação</th>
      <th>Modelo A</th>
      <th>Modelo B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>RAM</td>
      <td>16 GB</td>
      <td>32 GB</td>
    </tr>
    <tr>
      <td>Armazenamento</td>
      <td>512 GB</td>
      <td>1 TB</td>
    </tr>
  </tbody>
</table>

Resumindo

  • <dl> → definition list — lista de pares de termo e descrição
  • <dt> → definition term — o rótulo, pergunta ou termo
  • <dd> → definition description — a definição, resposta ou valor
  • Um <dt> pode ter múltiplos <dd> — um conceito com vários significados
  • Múltiplos <dt> podem compartilhar um <dd> — sinônimos com a mesma definição
  • Use <div> como agrupador de pares dentro de <dl> para facilitar o CSS
  • <dl> é adequado para glossários, especificações, metadados, FAQs e contatos
  • Não use <dl> apenas por razões visuais — só quando há uma relação semântica de rótulo/valor