Os elementos <dl>
, <dt>
e <dd>
são usados em conjunto principalmente para:
- Glossários;
- Lista de definições;
- Metadados (conjunto de pares chaves-valor).
Mas a pergunta é: o que significam essas tags HTML?
O elemento HTML <dl>
representa uma lista de descrição. O elemento
"envolve" uma lista de termos (especifícados pelo elemento <dt>
) e
descrições pelo elemento <dd>
.
Vou mostrar três exemplos, um para um glossário, um para metadados e para lista de definições.
- Exemplo para glossário:
dt {
font-weight: bold;
}
<dl>
<dt>Lorem ipsum</dt>
<dd>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis mollis est, at porttitor nisi. Curabitur tempor sollicitudin turpis, eget euismod massa accumsan vitae. Vivamus efficitur vitae elit vel luctus. Sed blandit vehicula ultrices.
</dd>
<dt>Lorem ipsum</dt>
<dd>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis mollis est, at porttitor nisi. Curabitur tempor sollicitudin turpis, eget euismod massa accumsan vitae. Vivamus efficitur vitae elit vel luctus. Sed blandit vehicula ultrices.
</dd>
<dt>Lorem ipsum</dt>
<dd>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis mollis est, at porttitor nisi. Curabitur tempor sollicitudin turpis, eget euismod massa accumsan vitae. Vivamus efficitur vitae elit vel luctus. Sed blandit vehicula ultrices.
</dd>
</dl>
- Exemplo para lista de definições (com relativa estilização, para facilitar entendimento)
dl.horizontal-definition-list {
display: table;
min-width: 400px;
}
.horizontal-definition-list dt, .horizontal-definition-list dd {
padding: 2% 10%;
}
.horizontal-definition-list dt {
display: table-cell;
text-align: right;
white-space: nowrap;
font-weight: 600;
background: gold;
padding-right: 10px;
}
.horizontal-definition-list dd {
display: table-cell;
background: silver;
}
.horizontal-definition-list dd.line-break {
display: table-row;
}
<dl class="horizontal-definition-list">
<dt>Termo 1</dt>
<dd>Definição 1</dd>
<dd class="line-break"></dd>
<dt>Termo 2</dt>
<dd>Definição 2</dd>
<dd class="line-break"></dd>
<dt>Termo 3</dt>
<dd>Definição 3<br>(várias linhas, sem problema)</dd>
<dd class="line-break"></dd>
</dl>
- Exemplo para implementação de lógica para metadados (chave-valor):
<dl>
<dt>Nome</dt>
<dd>João Pedro</dd>
<dt>Ano</dt>
<dd>2000</dd>
<dt>Páis</dt>
<dd>Brasil</dd>
<dt>Cor</dt>
<dd>Vermelho</dd>
</dl>
Vale ressaltar que sim, elas possuem valor semântico e são usadas principalmente para os três exemplos que ressaltei aqui. Diferentemente de listas convencionais (sem e com ordenação) as listas de definição (como o próprio nome chama, <dl>
de Definition List) devem ser usadas em dicionários e definições em geral, até porque, uma <dl>
não implica uma ordem para o seu conteúdo, mas implica uma semântica sobre os seus elementos filhos.
Em questão de uso para as tags eu acredito que podem ser usadas naquelas linhas do tempo, claro, com certa estilização. Ou também em lista de definições como mostrei no exemplo 3. Mas vejo, na minha opinião, o seu melhor uso em documentações de sistemas, frameworks ou bibliotecas.
Nota: Jamais use os elementos citados aqui na resposta (<dl>
, <dt>
e <dd>
) para indentar o conteúdo da sua página. Além de ser uma má prática tira o significados dos elementos.
Referências:
<dl>
delimita a lista, a tag<dt>
define termos e a tag<dd>
descreve os termos. O W3Schools fornece um link de exemplo a respeito. Daí o nome de "Lista de Definições/Descrições", porque as tags quando utilizadas dessa forma dão uma aparência caracteristica a lista.