Programação
 › Algoritmo  › C/C++  › Java
Web
 › HTML/XHTML  › JavaScript  › PHP
Sistema Operacional
 › Comandos de DOS  › Windows  › Linux  › Mac/BSD
Office
 › Word / Writer  › Excel / Calc
Áreas do Site
 › Download  › Fórum  › Blog
Recomendamos
Computadores e Informática em Lisboa
TI Expert » Programação » Web » HTML/XHTML » Listas de Definição - tags DL, DT e DD

Listas de Definição

Listas de definição não se diferenciam muito de listas comuns como as listas ordenadas e não-ordenadas.

A diferença principal entre as listas comuns e a listas de definição é que listas de definição irão sempre trabalhar com dois itens que são o termo e a definição.

A lista de definição fica contida dentro da tag DL.

Na tag DL, há o termo descrito pela tag DT que por sua vez é definido posteriormente na tag DD.

Bom para casos como, por exemplo, compor glossários e dicionários de termos para documentos.

...
<P>Há alguns aparelhos comumente empregados em estruturas de redes
de várias empresas, que são:</P>
<DL>
  <DT>Switch</DT>
    <DD>Dispositivo utilizado em redes de computadores para reencaminhar frames
    entre os diversos nós, sendo que a cada porta corresponde a um dominio de
    colisão diferente</DD>
  <DT>HUB</DT>
    <DD>Dispositivo utilizado em redes de computadores para reencaminhar frames
    entre os diversos nós, sendo que todas as portas correspondem ao mesmo dominio
    de colisão</DD>
  <DT>Roteador</DT>
    <DD>Dispositivo responsável pelo encaminhamento de pacotes de comunicação aos
    seus destinatários em uma rece ou entre redes, selecionando a rota mais
    eficiente disponível no momento</DD>
</DL>
...

*Informações obtidas de Wikipedia e UFMS

Abaixo está uma imagem de como é renderizada esta lista no Firefox 3.5.

Exemplo de renderização das tags DL, DT e DD para composição de uma lista de definição

Outra utilidade das listas de definição é simular um diálogo. Neste caso, a tag DT será o locutor e a tag DD será o que o locutor está falando.

...
<H1>Primeira aula de inglês</H1>
<H2>Conhecendo as pessoas</H2>
<DL>
  <DT>Anne:</DT>
    <DD>Nice to meet you, Harold!</DD>
  <DT>Harold:</DT>
    <DD>Nice to meet you too, Anne!</DD>
</DL>
...
Características - tag DL (lista - lista de definição)
Uso HTML 4.01 <DL> ... </DL>
XHTML <DL> ... </DL>
HTML 5 <DL> ... </DL>
Formatação Padrão Margem Superior 16px
Inferior 16px
Posição da lista externa
Visualização bloco

Características - tag DT (lista - termo)
Uso HTML 4.01 <DL>...<DT> ... </DT>...</DL>
XHTML <DL>...<DT> ... </DT>...</DL>
HTML 5 <DL>...<DT> ... </DT>...</DL>
Formatação Padrão Margem 0px
Espaçamento 0px
Posição da lista externa
Visualização bloco

Características - tag DD (lista - descrição do termo)
Uso HTML 4.01 <DL>...<DD> ... </DD>...</DL>
XHTML <DL>...<DD> ... </DD>...</DL>
HTML 5 <DL>...<DD> ... </DD>...</DL>
Formatação Padrão Margem Superior 40px
Inferior 0px
Direita 0px
Esquerda 0px
Espaçamento 0px
Posição da lista externa
Visualização bloco

Fonte: w3.org
Características comuns entre as tags DL, DT e DD
Atributos Aceitos id, class, lang, dir, title, style
Eventos Possíveis onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Creative Commons License
Autor: Denys William Xavier
Este artigo está sob Licença Creative Commons.

Faça o download da versão em PDF Indique nosso site Gostou?
Indique nosso site!
Este artigo foi
lido 20851 vezes
Bookmark e Compartilhe

Páginas Relacionadas

Enquete
O Google Chrome OS irá desbancar o Microsoft Windows 7?
» ProgramaçãoAlgorítmo | C/C++ | Java

» WebHTML/XHTML | JavaScript | PHP

» Sistema OperacionalComandos de DOS | Windows | Linux | Mac/BSD

» OfficeWord/Wirter | Excel/Calc

» Áreas do SiteDownloads | Fórum | Blog