Listas de definição – Mal entendidas ou mal utilizadas?
O que são listas de definição? Em que situações é apropriado usá-las? Como estilizá-las de maneira que se pareçam com tabelas, ou com galeria de imagens, ou com um calendário de eventos, e muito mais ainda.
Listas de definição são constituidas de duas partes: um termo e uma descrição. Para codificar uma lista de definição são necessários três elementos HTML:
<dl>;<dt>;<dd>.Por exemplo:
<dl>
<dt>Sapo</dt>
<dd>Criatura verde e pegajosa</dd>
<dt>Coelho</dt>
<dd>Criatura quente e fofa</dd>
</dl>
Você pode usar múltiplos elementos <dt> e <dd> em uma lista de definição:
<dl>
<dt>Arriscar</dt>
<dd>Chutar em gol</dd>
<dd>Fazer uma aposta</dd>
</dl>
<dl>
<dt>Cor</dt>
<dt>Colorido</dt>
<dd>Qualquer tom que não seja preto ou branco</dd>
</dl>
Você pode colocar elementos nível de bloco dentro do elemento <dd> descrição, tais como elementos <p> e elementos <ul>. Você não pode colocar elementos nível de bloco dentro do elemento <dt> termo.
<dl>
<dt>Sapo</dt>
<dd><p>Criatura verde e pegajosa que coacha.</p></dd>
</dl>
<dl>
<dt>Sapo</dt>
<dd>
<ul>
<li>Pegajoso</li>
<li>Verde</li>
<li>Coacha</li>
</ul>
</dd>
</dl>
Existem duas opiniões sobre o uso de listas de definição. Alguns acreditam que elas devem ser usadas estritamente para marcar termos e definições. Outros acreditam que podem ser usadas para fazer corresponder entre si, quaisquer itens que tenham um relacionamento direto uns com os outros (conjuntos de nomes/valores). Este segundo ponto de vista apóia-se em um exemplo contido nas especificações do W3C:
Outra aplicação para as listas de definição, por exemplo, é para marcar diálogos, onde cada elemento DT nomeia uma pessoa participante do diálogo e cada elemento DD contém sua fala.
Embora alguns discordem deste exemplo, ele sugere que listas de definição podem ser usadas para a marcação de itens relacionados entre si, indo assim além do que simplesmente marcar termos e definição. De acordo com esta argumentação todos os exemplos mostrados a seguir podem ser marcados com listas de definição:
Antes de usar uma lista de definição, esteja ciente de que nem sempre esta é a melhor opção.
<dt> não pode conter elementos nível de bloco – em particular elementos <hn> para cabeçalhos. Se o conteúdo em um <dt> não pode ser marcado como cabeçalho, a ele não será dada a importância própria de cabeçalhos dentro da hierarquia do documento. Assim, o Google e outros mecanismos de indexação não consideram as listas de definição com o mesmo peso dos conteúdos dos cabeçalhos.
Embora listas de definição possam ser estilizadas para se parecer com tabelas de dados, elas não dispõem de funcionalidades para leitores de tela tais como "labels" e "headers" para grupar informações e consequentemente incrementar a acessibilidade.
HTML
<dl>
<dt>Sapo Pipa</dt>
<dd>O sapo - pipa vive nos pântanos da região amazônica...</dd>
<dt>Sapo Malaio</dt>
<dd>O sapo malaio tem três chifres, um em cima de cada olho...</dd>
<dt>Sapo Comun</dt>
<dd> O sapo comum tem uma pele dura e ressecada, coberta de...</dd>
</dl>
HTML
<dl class="sem-margens">
<dt>Sapo Pipa</dt>
<dd>O sapo - pipa vive nos pântanos da região amazônica...</dd>
<dt>Sapo Malaio</dt>
<dd>O sapo malaio tem três chifres, um em cima de cada olho...</dd>
<dt>Sapo Comun</dt>
<dd> O sapo comum tem uma pele dura e ressecada, coberta de...</dd>
</dl>
CSS
dl.sem-margens {
margin: 0;
padding: 0;
}
.sem-margens dt {
margin: 0;
padding: 0;
font-weight: bold;
}
.sem-margens dd {
margin: 0 0 1em 0;
padding: 0;
}
HTML
<dl class="imagem-fundo">
<dt>Sapo Pipa</dt>
<dd>O sapo - pipa vive nos pântanos da região amazônica...</dd>
<dt>Sapo Malaio</dt>
<dd>O sapo malaio tem três chifres, um em cima de cada olho...</dd>
<dt>Sapo Comun</dt>
<dd> O sapo comum tem uma pele dura e ressecada, coberta de...</dd>
</dl>
CSS
.imagem-fundo dt {
color: #000;
font-weight: bold;
padding: 0;
}
.imagem-fundo dd {
margin: 0 0 1em 0;
padding: 0 0 0 10px;
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}
HTML
<dl class="com-bordas">
<dt>Sapo Pipa</dt>
<dd>O sapo - pipa vive nos pântanos da região amazônica...</dd>
<dt>Sapo Malaio</dt>
<dd>O sapo malaio tem três chifres, um em cima de cada olho...</dd>
<dt>Sapo Comun</dt>
<dd> O sapo comum tem uma pele dura e ressecada, coberta de...</dd>
</dl>
CSS
dl.com-bordas {
margin: 2em 0;
padding: 0;
width: 20em;
}
.com-bordas dt {
background-color: #131210;
color: #959289;
padding: .5em .5em;
font-weight: bold;
text-align: center;
text-transform: uppercase;
border-left: 1px solid #131210;
border-right: 1px solid #131210;
border-top: 1px solid #131210;
}
.com-bordas dd {
margin: 0 0 1em 0;
background: #DBD8D8;
text-align: center;
padding: 1em .5em;
font-style: italic;
border-left: 1px solid #131210;
border-right: 1px solid #131210;
border-bottom: 1px solid #131210;
}
HTML
<dl class="tabela">
<dt>Sapo Pipa</dt>
<dd>O sapo - pipa vive nos pântanos da região amazônica...</dd>
<dt>Sapo Malaio</dt>
<dd>O sapo malaio tem três chifres, um em cima de cada olho...</dd>
<dt>Sapo Comun</dt>
<dd> O sapo comum tem uma pele dura e ressecada, coberta de...</dd>
</dl>
CSS
dl.tabela {
width: 41.1em;
margin: 2em 0;
padding: 0;
font-family: georgia, times, serif;
}
.tabela dt {
width: 15em;
float: left;
margin: 0 0 0 0;
padding: .5em;
border-top: 1px solid #999;
font-weight: bold;
}
/* commented backslash hack for mac-ie5 \*/ dt { clear: both; }
/* end hack */
.tabela dd {
float: left;
width: 24em;
margin: 0 0 0 0;
padding: .5em;
border-top: 1px solid #999;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
HTML
<dl class="float-right">
<dt>Banksia flower</dt>
<dd><img src="flower.jpg" alt=""></dd>
<dd><em>Banksius maximus</em></dd>
<dd>Found off the coast of Australia</dd>
</dl>
CSS
dl.float-right {
border: 1px solid #000;
background-color: #ddd;
width: 142px;
text-align: center;
padding: 0 0 10px 0;
float: right;
margin: 0 0 1em 1em;
}
.float-right dt {
font-weight: bold;
background-color: #131210;
color: #959289;
padding: 5px 10px;
margin-bottom: 10px;
}
.float-right dd img {
border: 1px solid #000;
width: 100px;
height: 100px;
}
.float-right dd {
margin: 0;
padding: 0 10px 5px 10px;
font-size: 85%;
}
HTML
<dl class="galeria">
<dt><img src="flower.jpg" alt=""></dt>
<dt>Titulo aqui</dt>
<dd>Descrição aqui</dd>
</dl>
<dl class="galeria">
<dt><img src="flower2.jpg" alt=""></dt>
<dt>Titulo aqui</dt>
<dd>Descrição aqui</dd>
</dl>
<dl class="galeria">
<dt><img src="flower3.jpg" alt=""></dt>
<dt>Titulo aqui</dt>
<dd>Descrição aqui</dd>
</dl>
CSS
dl.galeria {
border: 1px solid #000;
background-color: #ddd;
width: 102px;
text-align: center;
padding: 10px;
float: left;
margin-right: 1em;
}
.galeria dt {font-weight: bold; }
.galeria dt img {
border: 1px solid #000;
width: 100px;
height: 100px;
}
.galeria dd {
margin: 0;
padding: 0;
}
HTML
<dl class="evento">
<dt>23 de Março</dt>
<dd>Automóveis antigos</dd>
<dd>07:00 horas</dd>
<dd>Uma exposição de automóveis antigos, com modelos desde a década de 20. Venha com toda a família. Infra-estrutura para crianças e bebês.</dd>
<dt>13 de Junho</dt>
<dd>Festival da laranja</dd>
<dd>12:00 horas</dd>
<dd>Laranjas de produtores de todo o estado. Diversos tipos de sucos e doces de laranja. Renda em favor do asilo São Judas.</dd>
</dl>
CSS
dl.evento {
margin: 2em 0;
padding: 0;
font-family: georgia, times, serif;
}
.evento dt {
position: relative;
left: 0;
top: 1.8em;
width: 8em;
font-weight: bold;
}
.evento dd {
border-left: 1px solid #000;
margin: 0 0 0 10em;
padding: 0 0 .5em .5em;
}
HTML
<dl class="tabela-1>
<dt>Sapo Pipa</dt>
<dd class="first">O sapo - pipa vive nos pântanos da região amazônica</dd>
<dd>É com certeza um dos anfíbios mais estranhos que existe</dd>
<dt>Sapo Malaio</dt>
<dd class="primeiro">O sapo malaio tem três chifres, um em cima de cada olho e outro na ponta do nariz</dd>
<dd>Os sapos - malaios só são encontrados no Sudeste asiático</dd>
</dl>
CSS
dl.tabela-1 { border-bottom: 1px solid #999; }
.tabela-1 dt {
width: 15em;
padding: .5em;
float: left;
margin: 0;
border-top: 1px solid #999;
font-weight: bold;
}
.tabela-1 dd {
margin-left: 16em;
padding: .5em;
}
.tabela-1 dd.first { border-top: 1px solid #999; }
Esta estilização para listas de definição em formulários foi acrescentada pelo Maujor, autor da tradução
HTML
<form action-xhr="#" method="" class="formu">
<dl class="formulario">
<dt><label for="nome">Nome</label></dt>
<dd><input type="text" id="nome" /></dd>
<dt><label for="email">E-mail</label></dt>
<dd><input type="text" id="email" /></dd>
<dt><label for="comentario">Comentário</label></dt>
<dd><textarea id="comentario"></textarea></dd>
<dt><input type="submit" value="Enviar" /></dt>
</dl>
</form>
CSS
/* Estilos para o formulario */
.formu {
font: 0.8em Arial, Helvetica, sans-serif;
width:28.0em;
border:#ccc 1px solid;
padding:10px 20px;
background-color:#fafafa;
}
input#nome, input#email {
width:15.0em;
border:#eee 2px solid;
}
textarea#comentario {
width:20.0em;
height:10.0em;
border:#eee 2px solid;
}
input#nome:focus, input#email:focus,
textarea#comentario:focus {
background: #ffe;
}
/* Estilos para a lista de definicao */.formulario dt {margin-top:1.5em;}
.formulario dd {margin:0; padding:0;}
Este artigo é uma tradução do original em ingles de Russ Weakley
publicado em http://www.maxdesign.com.au/presentation/definition/
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
Gostaria de saber se posso usar do dl dt e dd em uma instrucao de passo a passo?
Ex:
Passo 01
1º Pega a caneta
2º Pega o Papel
3º escreva no papel
Obrigado
Boa tarde, gostaria de saber se é possível (e recomendável) o uso de List-style na DT para a inserção de marcadores no ítem principal...
No começo é um pouco difícil de entender, mas aos poucos dá pra pegar o jeito.
@Roger
Grato por avisar.
Problema resolvido.
Olá Maujor, sou mais um entre as centenas (ou milhares) de admiradores do seu trabalho de divulgar a css.
Apenas gostaria de perguntar se as imagens que constam em alguns exemplos não estão com os links quebrados (assim como o exemplo que está no Listas com imagem de fundo clicável)
Se estiver equivocado, me perdoe, é que no meu navegador não aparecem mais as imagens e antes aparecia...
um abraço e muito obrigado por tudo que você tem nos ensinado.
Excelente!
Muito bom artigo.
Eu estava procurando em que situação usar as listas de definição para deixar o html mais semântico e encontrei a explicação certa!
Parabéns.
Essa opção é muito útil.
Gostaria se saber se no exemplo galeria de imagens, teria como alinha ao CENTRO e não à esquerda, que é devido ao atributo FLOAT.
Tem como ?!!!
Abç
Excelente artigo!
Era exatamente isto que eu estava procurando.
Valew mesmo
Não seria então mais semântico utilizar as listas de definição na construção de perifs pessoais, como por exemplo em blogs, etc?