Resumo

O elemento HTML Definition List (<dl>) engloba uma lista de pares de termos e descrições. Um uso comum para este elemento é para implementar um glossário ou exibir metadados(uma lista de pares chave e valor).

Contexto de Uso

Conteúdo permitido Zero ou mais elementos <dt>, cada um seguido de um ou mais elementos <dd>
Omissão de Tag Nenhum, este é um elemento vazio.
Permite elementos pai Qualquer elemento que aceite conteúdo de fluxo.
Documentação normativa HTML5, section 4.5.8; HTML 4.01, section 10.3

Atributos

Como todo elemento HTML, ele fornece os attributos globais.

compact
Obriga a definição da descrição aparecer na mesma linha que a definição do termo. Funciona apenas no Internet Explorer.

Exemplos

Termo e definição única

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>

  <!-- other terms and definitions -->
</dl>

Output:

Image:HTML-dl1.png

Múltiplos termos, definição única

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>

  <!-- other terms and definitions -->
</dl>

Saída:

Image:HTML-dl2.png

Termo único, múltiplas definições

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>
  <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox,
      is a mostly herbivorous mammal, slightly larger than a domestic cat
      (60 cm long).</dd>

  <!-- other terms and definitions -->
</dl>

Saída:

Image:HTML-dl3.png

Múltiplos termos e definições

Também é possível definir vários termos com as definições múltiplas correspondentes, combinando com os exemplos acima.

Interface DOM

Notas

Não use este elemento,  (nor <ul> elements), para criar meramente um recuo em uma página. Embora ele funcione, está é uma má prática e obscurece o significado da lista de definição.

Para mudar a indentação de um termo, use a propriedadr CSS margin.

Compatibilidade de navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes1 Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes4 Yes Yes Yes

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Yes) (Yes) (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)

Veja também

 

Etiquetas do documento e colaboradores

Colaboradores desta página: GPrimola, niltoncsr, fellyph, pkelbert, teoli, ken210
Última atualização por: GPrimola,