Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

O elemento dl na HTML5

Publicado em: 2009-11-27 — 16.121 visualizacoes         

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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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.

11 comentários na matéria: “O elemento dl na HTML5”

  1. SophiaNo Gravatar disse:

    vou começar a estudar esses tutoriais.

  2. jessicaNo Gravatar disse:

    Preciso estudar muitoo, tutoriais são bom .

  3. Ana LuizaNo Gravatar disse:

    tutoriais de HTML e CSS…
    e são incríveis

  4. marcelo portoesNo Gravatar disse:

    digo ‘por favor’

  5. marcelo portoesNo Gravatar disse:

    Maujor me endique por favou um livro que trate de maneira simples css e html 5 na rede

  6. RodolfoNo Gravatar disse:

    Otimo Post !!!

  7. DriMNo Gravatar disse:

    Olá! Vim aqui só para contar que li inteirinho seus tutoriais de HTML e CSS…
    e são incríveis!
    Muito obrigada por disponibilizar a informação!
    Ajudou muito!
    :)))

  8. Mauro GeorgeNo Gravatar disse:

    Sinceramente acho a qualidade do HTML 5 uma coisa incrivel. No entanto sou da opinião de utilizar, até a data deste post, apenas em projetos pessoais pelo fato de falta de instabilidade de manter todas as tags e semânticas sobre elas.

  9. klawdyoNo Gravatar disse:

    Repetindo o código….
    é o seguinte. Estou usando dessa forma: http://pastebin.com/f1cfc2e87

    De acordo com o que foi dito sobre html5 aqui no post, isso não será válido, pois o DL precisa de um par de chaves título:valor com DT e DD, correto?

    Que alterações precisaria fazer nessa vitrine para obter o máximo de semântica?

  10. MaujorNo Gravatar disse:

    Sobre a pergunta do @klawdyo no comentário #1, você, que leu a matéria, se fosse usar HTML5, como marcaria?
    Dica: Para marcar código em comentários use codificação de caracteres para o sinal “menor que” ( < ).
    Digite assim:
    &lt;detais>
    Para sair assim:
    <details>
    Não há necessidade de codificar o sinal “maior que” >

  11. klawdyoNo Gravatar disse:

    Em um site de imóveis, nos detalhes dos mesmos, posso fazer isso?

    apartamento

    aluguel
    R$2500
    boa área, próximo a escolas, etc, etc, etc

    O que você sugere para o máximo de semântica num caso desses?

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo