Tag HTML <dt>
A tag <dt> é usada para definir um termo em uma lista de definições. Descrição da tag, atributos e exemplos.
A tag <dt> (abreviação de description term, anteriormente definition term) indica o termo que está sendo definido dentro de uma lista de descrições. É uma das três tags que formam esse tipo de lista, juntamente com <dl> e <dd>:
<dl>envolve toda a lista (a lista de descrições).<dt>nomeia um termo, como uma palavra em um glossário ou um rótulo de metadados.<dd>fornece a descrição ou o valor para o termo precedente.
Use uma lista de descrições sempre que o seu conteúdo for naturalmente um conjunto de pares nome/valor: um glossário, perguntas e respostas de FAQ, metadados chave/valor ou definições de termos. Para conteúdo ordenado ou com marcadores, use outro tipo de lista — veja a visão geral de listas HTML.
Regras estruturais
O elemento <dt> tem dois requisitos que você deve seguir para uma marcação válida e acessível:
<dt>deve ser filho direto de<dl>. Ele não pode aparecer sozinho fora de uma lista de descrições (ou, em HTML moderno, dentro de um único<div>de agrupamento diretamente dentro do<dl>).<dt>deve vir antes do seu<dd>. Cada grupo começa com um ou mais termos (<dt>), seguido de uma ou mais descrições (<dd>). Um<dd>descreve o(s) elemento(s)<dt>que o precedem.
A tag <dt> vem em pares: o conteúdo fica entre as tags de abertura <dt> e fechamento </dt>.
Exemplo da tag HTML <dt>:
Tag HTML <dt>
<!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>Resultado
Múltiplos termos e múltiplas descrições
Um grupo de descrições não está limitado a um termo e uma descrição. Você pode combinar vários elementos <dt> e <dd> no mesmo grupo.
Vários <dt> para um <dd> — use quando vários termos compartilham uma única definição, por exemplo sinônimos ou grafias alternativas:
<dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dt>Fx</dt>
<dd>A free, open-source web browser developed by the Mozilla Foundation.</dd>
</dl>Vários <dd> para um <dt> — use quando um único termo tem mais de um significado ou valor:
<dl>
<dt>Coffee</dt>
<dd>A hot beverage brewed from roasted coffee beans.</dd>
<dd>The seeds of the coffee plant.</dd>
</dl>Um exemplo realista: metadados de produto
As listas de descrições são ideais para metadados chave/valor. Aqui cada <dt> é um rótulo e cada <dd> é o seu valor:
<dl>
<dt>Product name</dt>
<dd>Mechanical Keyboard K3</dd>
<dt>Manufacturer</dt>
<dd>Keychron</dd>
<dt>Connectivity</dt>
<dd>Bluetooth 5.1</dd>
<dd>USB-C (wired)</dd>
<dt>Price</dt>
<dd>$79.99</dd>
</dl>Observe que o termo Connectivity tem dois valores <dd> — uma forma limpa de listar múltiplos valores para um único rótulo.
Renderização padrão
Os navegadores não estilizam o <dt> de nenhuma forma especial por padrão: o termo é renderizado com peso normal (sem negrito), enquanto cada <dd> seguinte aparece com recuo abaixo dele. A hierarquia visual que normalmente se espera de um glossário — termos em negrito — vem do CSS, não dos padrões do navegador.
Atributos
A tag <dt> suporta os Atributos Globais e os Atributos de Evento.
Como estilizar uma tag HTML <dt>
O trecho abaixo substitui a renderização padrão: deixa os termos em negrito e dá a eles uma cor distinta, para que se destaquem de suas descrições.
dt {
font-weight: bold;
color: #2c3e50;
}Acessibilidade
As listas de descrições carregam significado além de sua aparência. Leitores de tela reconhecem a estrutura <dl>/<dt>/<dd> e anunciam cada <dt> como um termo juntamente com sua descrição <dd> associada, para que os usuários ouçam o termo e seu valor como um par conectado. Simular a mesma aparência com parágrafos simples e CSS perde essa relação. Use uma lista de descrições real sempre que o conteúdo for genuinamente um conjunto de pares termo/descrição.