Tag HTML <dd>
A tag HTML <dd> fornece a descrição de um termo numa lista de descrição, usada com as tags <dl> e <dt>.
A tag HTML <dd> (description details) fornece a descrição de um termo numa lista de descrição. Ela funciona apenas dentro de um <dl> (lista de descrição), associada a um ou mais elementos <dt> (termo de descrição) que identificam o que está sendo descrito.
O agrupamento dentro de um <dl> é flexível — você pode ter:
- um termo seguido de uma descrição,
- um termo seguido de várias descrições,
- vários termos (sinônimos) seguidos de uma descrição,
- vários termos seguidos de várias descrições.
O elemento <dd> pode conter outros conteúdos: parágrafos, listas, imagens, links e assim por diante. Ele é colocado dentro de <body>, como filho de <dl>. Por padrão, os navegadores recuam <dd> com uma margem à esquerda, de modo que a descrição fique visualmente abaixo do seu termo.
Quando usar uma lista de descrição
Use <dl>/<dt>/<dd> para pares nome-valor — conteúdo em que cada item é um rótulo e uma descrição associada. Casos de uso adequados incluem:
- Glossários — uma palavra e seu significado.
- FAQs — uma pergunta (
<dt>) e sua resposta (<dd>). - Fichas técnicas de produtos / metadados — propriedades como "Peso", "Material", "SKU" e seus valores.
Não recorra a uma lista de descrição apenas porque deseja recuo, ou para uma sequência arbitrária de itens sem rótulo. Para etapas ordenadas, use uma lista ordenada (<ol>); para um conjunto simples de itens, use uma lista não ordenada (<ul>). Escolha uma lista de descrição apenas quando cada entrada for genuinamente um termo associado a uma descrição.
Sintaxe
A tag <dd> vem em pares. O conteúdo é escrito entre as tags de abertura (<dd>) e fechamento (</dd>), e deve estar dentro de um <dl>, após um ou mais elementos <dt>.
Exemplo: um glossário
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Coffee glossary</h1>
<dl>
<dt>Espresso</dt>
<dd>A concentrated coffee brewed by forcing hot water through finely-ground beans.</dd>
<dt>Latte</dt>
<dd>Espresso with a large amount of steamed milk and a light layer of foam.</dd>
<dt>Americano</dt>
<dd>Espresso diluted with hot water for a lighter, longer drink.</dd>
</dl>
</body>
</html>Exemplo: uma ficha técnica de produto
Um único termo também pode ter várias descrições <dd>, e vários termos <dt> podem compartilhar um único <dd>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Backpack specifications</h2>
<dl>
<dt>Capacity</dt>
<dd>28 liters</dd>
<dt>Material</dt>
<dd>Recycled polyester</dd>
<dd>Water-resistant coating</dd>
<dt>Color</dt>
<dt>Colour</dt>
<dd>Charcoal grey</dd>
</dl>
</body>
</html>Acessibilidade
O elemento <dd> tem um papel ARIA implícito de definition, e <dt> tem o papel term. As tecnologias assistivas utilizam a estrutura <dl> para anunciar cada descrição junto com o termo ao qual ela pertence, portanto manter a marcação semântica (em vez de simular uma lista com <div>s e CSS) torna o conteúdo mais fácil de navegar. Não adicione um atributo role explícito — o papel implícito já está correto.
Atributos
A tag <dd> não possui atributos específicos do elemento. Ela suporta apenas os Atributos Globais e os Atributos de Evento.
Como estilizar uma tag HTML <dd>
Os navegadores aplicam uma margem esquerda padrão (geralmente 40px) ao <dd>. Você pode removê-la ou substituí-la com CSS — por exemplo, eliminar o recuo e adicionar seu próprio espaçamento e estilo:
dd {
margin-left: 0; /* remove the default left indent */
padding-left: 1rem; /* add your own spacing instead */
color: #555;
}
dt {
font-weight: bold;
}