Lista de definições em HTML
Listas / Tutorial HTML5
O que são listas de definições?
As listas de definições são utilizadas para exibir termos seguidos de suas descrições, criando uma relação clara entre eles. No HTML, utilizamos a tag <dl>
para marcar uma lista de definições, junto com <dt>
e <dd>
para definir os elementos internos.
Como adicionar uma lista de definições no documento HTML?
Utilize a lista de definições <dl>
para representar uma lista com termos descritos. As tags envolvidas na marcação são:
Tag | Tipo da lista | Origem do nome |
---|---|---|
<dl> | Marca uma lista de definições | <dl> vem de definition list |
<dt> | Marca um termo a ser descrito | <dt> vem de definition term |
<dd> | Marca a descrição de um termo | <dd> vem de definition description |
Exemplo:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Dicas e boas práticas
- Consistência: Use
<dt>
para marcar sempre o termo e<dd>
para suas descrições. - Semântica: As listas de definições são ideais para glossários, dicionários e descrições de propriedades.
- Estilo: Utilize CSS para melhorar a apresentação visual das listas, ajustando margens, espaçamentos e tipografia.
Exemplo:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>