HTML Academy · Aula

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

Marcar pares de termos e definições com listas de descrição.

Listas de descrição: dl, dt e dd é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

O que é uma lista de descrição?

Uma lista de descrição agrupa termos com suas descrições:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure of the web.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — the presentation of the web.</dd>

  <dt>JavaScript</dt>
  <dd>The programming language of the web.</dd>
</dl>

Os elements dl, dt e dd

Três elements compõem uma lista de descrição:

<dl> — contêiner da lista de descrição
<dt> — termo da descrição (a chave)
<dd> — detalhes da descrição (o valor)

Vários dd por dt

Um termo pode ter várias descrições:

<dl>
  <dt>HTML</dt>
  <dd>Stands for HyperText Markup Language.</dd>
  <dd>First published as HTML 2.0 in 1995.</dd>
  <dd>Current version: HTML5 (Living Standard).</dd>
</dl>

Vários dt por dd

Vários termos podem compartilhar uma descrição (sinônimos, aliases):

<dl>
  <dt>Username</dt>
  <dt>Login</dt>
  <dt>Handle</dt>
  <dd>The unique identifier used to log in to your account.</dd>
</dl>

Casos de uso reais

Listas de descrição são perfeitas para:

Glossários e definições
Seções de FAQ (pergunta → resposta)
Metadados de produtos (Autor: Jane, Publicado: 2024)
Detalhes de receitas (Tempo de preparo: 10 min, Serve: 4)
Documentação de parâmetros de API

FAQ com dl

Crie uma FAQ com listas de descrição:

<dl class="faq">
  <dt>Is HTML a programming language?</dt>
  <dd>No. HTML is a markup language. It defines structure and meaning, not logic or computation.</dd>

  <dt>Do I need to close void elements?</dt>
  <dd>In HTML5, void elements like &lt;img&gt; and &lt;br&gt; do not need a closing slash.</dd>
</dl>

dl para metadados

Exiba metadados de artigos ou produtos:

<article>
  <h1>Responsive Images Guide</h1>

  <dl class="metadata">
    <dt>Author</dt>
    <dd>Jane Smith</dd>

    <dt>Published</dt>
    <dd><time datetime="2024-03-15">March 15, 2024</time></dd>

    <dt>Reading time</dt>
    <dd>8 minutes</dd>
  </dl>
</article>

Estilizando dl

Estilize listas de descrição com CSS:

/* Two-column layout */
dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
}

dt {
  font-weight: bold;
  color: #555;
}

dd {
  margin: 0;  /* Remove browser default dd margin */
}

Aninhamento de dl

As listas de descrição podem ser aninhadas para definições hierárquicas:

<dl>
  <dt>HTML Elements</dt>
  <dd>
    <dl>
      <dt>Block elements</dt>
      <dd>Take full width: div, p, h1-h6</dd>
      <dt>Inline elements</dt>
      <dd>Flow with text: span, a, strong</dd>
    </dl>
  </dd>
</dl>

dl versus table para dados chave-valor

Quando usar <dl> em vez de <table> para dados chave-valor:

dl — associações entre termos e descrições (pares nome-valor)
table — dados tabulares com linhas e colunas (vários atributos por item)

<dl>
  <dt>Name</dt><dd>Jane</dd>
  <dt>Role</dt><dd>Developer</dd>
</dl>
<!-- vs table for multiple users with same attributes -->

Divs inside dl

Envolver grupos dt/dd em <div> inside <dl> é válido no HTML5:

<dl>
  <div>
    <dt>HTML</dt>
    <dd>Markup language for web pages.</dd>
  </div>
  <div>
    <dt>CSS</dt>
    <dd>Styling language for web pages.</dd>
  </div>
</dl>
<!-- Useful for zebra-striping or grouping with CSS -->

Verificação rápida

Qual elemento contém a definição/o valor em uma lista de descrição?

Recapitulação: listas de descrição

Fundamentos das listas de descrição:

<dl> — contêiner da lista de descrição
<dt> — termo (chave, pergunta, nome)
<dd> — descrição (valor, resposta, definição)
Um dt pode ter vários dd; vários dt podem compartilhar um dd
Perfeitas para glossários, FAQs e metadados
Envolva grupos em <div> para ter flexibilidade de estilização

Perguntas Frequentes

A aula “Listas de descrição: dl, dt e dd” é grátis?

Sim — o texto completo de “Listas de descrição: dl, dt e dd” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Listas de descrição: dl, dt e dd”?

Marcar pares de termos e definições com listas de descrição. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Listas de descrição: dl, dt e dd”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Listas não ordenadas: ul e li
Listas ordenadas: ol, start, reversed e type
Listas de descrição: dl, dt e dd
Listas aninhadas e estilos de listas

← Voltar para HTML Academy