Blog do Maujor - Tutoriais e pensamentos, CSS, web standards, acessibilidade, tableless

A especificação para HTML 4 define o elemento dl para marcar as listas de definição (definition lists) e diz o seguinte:

Os items das listas de definição são constituidos de duas partes: termo e descrição. O elemento para marcar o termo é dt e deve conter somente elementos inline. O elemento para marcar a descrição é dd e pode conter elementos nível de bloco.

A referida especificação demonstra o uso destes elementos e dá exemplos que esclarecem ser permitido o uso de mais de um elemento dt e/ou dd dentro de um mesmo elemento dl conforme mostrado a seguir:

<dl>
<dt>Nerd</dt>
<dd>Pessoa tecnicamente brilhante, mas com comportamento social passivo.</dd>
<dt>Hacker</dt>
<dt>Chacker</dt>
<dd>São frutos da sociedade moderna.</dd>
<dd>Possuem conhecimentos avançados de programação.</dd>
</dl>

Outro emprego das listas de definição, segundo a HTML 4, é para marcar diálogos, usando-se o elemento dt para marcar os interlocutores e dd para suas falas, conforme mostrado a seguir:

...
...
<dl>
<dt>Filho</dt>
<dd>Mamãe, você sabia que o vovô é mecânico.</dd>
<dt>Mãe</dt>
<dd>De onde você tirou isto meu filho. Vovô não é mecânico!</dd>
<dt>Filho</dt>
<dd>Então, o que ele está fazendo embaixo do ônibus ali na esquina?</dd>
</dl>

O que diz a HTML 5?

A HTML 5 altera radicalmente a semântica e consequente emprego das listas de definição e seus items.

Observe a seguir o que está previsto, resumidamente, na especificação para HTML 5 e a seguir meu comentário:

Especificação: O elemento dl destina-se a marcar uma lista associativa consistindo de zero ou mais grupos do par nome/valor (lista de definição). Cada grupo consiste de um ou mais nomes (elementos dt) seguido por um ou mais valores (elementos dd). Dentro de um elemento dl não pode haver mais de um dt com o mesmo nome.

Comentário: A HTML 5 introduz o conceito do par nome/valor dentro da listas associativas ampliando a semântica do elemento. Assim, o elemento dt não mais representa um termo a ser definido e sim, genericamente, um nome a ser associado. Quando ocorrer aquele caso deve-se usar o elemento dfn (você conhece o elemento dfn da HTML 4?) como elemento-filho de dt conforme mostrado a seguir:

...
...
<dl>
<dt><dfn>Nerd</dfn></dt>
<dd>Pessoa tecnicamente brilhante, mas com comportamento social passivo.</dd>
<dt><dfn>Hacker</dfn></dt>
<dt><dfn>Chacke</dfn>r</dt>
<dd>São frutos da sociedade moderna.</dd>
<dd>Possuem conhecimentos avançados de programação.</dd>
</dl>

Especificação: O elemento dl não é apropriado para marcar diálogos.

Comentário: Anula o que diz a HTML 4. Observe a seguir como marcar um diálogo segundo a HTML 5:

...
...
<p>Filho: Mamãe, você sabia que o vovô é mecânico.</p>
<p>Mãe: De onde você tirou isto meu filho. Vovô não é mecânico!</p>
<p>Filho: Então, o que ele está fazendo embaixo do ônibus ali na esquina?</p>

Especificação: Um só elemento dt e um só elemento dd podem ser usados como elemento-filho do elemento figure e a ordem em que eles aparecem é indeferente.

Comentário: A HTML 5 permite o uso de dt e dd como elementos-filhos único do elemento figure sem necessidade do elemento dl, podendo dd vir antes de dt. Quando assim empregados o elemento dt marca a legenda da figura e dd o seu conteúdo. Obeserve o exemplo a seguir:

...
...
<figure>
<dd><img src="copa.jpg" alt="Vista da praia de Copacabana"></dd>
<dt>Praia de Copacabana - janeiro 2009</dt>
</figure>

Especificação: O elemento dt pode ser usado como primeiro-filho do elemento details e o elemento dd como seu último-filho. O elemento dt destina-se a marcar um sumário do que está sendo detalhado e o elemento dd os detalhes propriamente ditos.

Comentário: A HTML 5 permite o uso de dt e dd como elementos-filhos do elemento details sem necessidade do elemento dl. Observe o exemplo a seguir. Notar a presença do elemento dl como filho do elemento dd!:

...
...
<details>
  <dt>Copiando... <progress max="375505392" value="97543282"></progress> 25%</dt>
  <dd>
   <dl>
    <dt>Taxa de transferência:</dt>
	<dd>452KB/s</dd>
    <dt>Arquivo local:</dt>
	<dd>/home/rpausch/raycd.m4v</dd>
    <dt>Arquivo remoto:</dt>
	<dd>/var/www/lectures/raycd.m4v</dd>
    <dt>Duração:</dt>
	<dd>01:16:27</dd>
    <dt>Perfil de cores:</dt>
	<dd>SD (6-1-6)</dd>
    <dt>Dimensões:</dt>
	<dd>320×240</dd>
   </dl>
  </dd>
</details>

Concluindo

Como tudo na especificação para a HTML 5, as definições e conceitos de emprego dos elementos para listas de definição, conforme mostrados nesta matéria, ainda estão em fase de rascunho de trabalho. A própria documentação do WHATWG esclarece que tais conceitos ainda precisam uma análise mais profunda.

Ao escrever esta matéria meu objetivo foi de fornecer aos meus leitores uma visão antecipada do que está por vir (sabe-se lá quando) com a HTML 5.

Quer opinar? Marque uma, ou mais, das opções a seguir e poste sua opinião nos comentários.

Vou usar listas associativas nos sites quer pretendo desenvolver em HTML 5.
Vou atualizar as listas e figuras dos sites que pretendo redesenhar para HTML 5.
Vou esperar para desenvolver com HTML 5.
Caracas! Preciso estudar mais HTML 5.

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Livros do Maujor

                   

Esta matéria foi publicada em: 2009-11-27 (sexta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2009/11/27/o-elemento-dl-na-html5/trackback no seu site.