Tutoriais CSS | Web Standards | Acessibilidade

Listas de definição – entenda e saiba usar

Publicado em: 2006-04-26 — 83.369 visualizacoes

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.

O que são listas de definição?

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:

um container <dl>;
um termo de definição <dt>;
uma descrição <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>

Em que situações é apropriado usar listas de definição?

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.

Lists in HTML documents

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:

DT: Fulano: DD: Fala

DT: Imagem: DD: Descrição; DD: Localização; DD: Fotografo

DT: Termo: DD: Imagem descritiva; DD: Descrição

DT: Website (link): DD: Descrição

DT: Data: DD: Evento

DT: Evento: DD: Data; DD: Descrição; DD: Local

DT: Links internos: DD: Home; DD: Seção 1; DD: Seção 2
DT: Links externos: DD: Link externo 1; DD: Link externo 2

Quais são as desvantagens do uso de 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.

Estilização de listas de definição

Listas sem estilização

Sapo Pipa: O sapo pipa vive nos pântanos da região amazônica…
Sapo Malaio: O sapo malaio tem três chifres, um em cima de cada olho…
Sapo Comum: O sapo comum tem uma pele dura e ressecada, coberta de pequenas escamas.


	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>

Listas com remoção das margens

Sapo Pipa: O sapo pipa vive nos pântanos da região amazônica…
Sapo Malaio: O sapo malaio tem três chifres, um em cima de cada olho…
Sapo Comum: O sapo comum tem uma pele dura e ressecada, coberta de pequenas escamas.


	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;
	  }

Listas com imagem de fundo em DD

Sapo Pipa: O sapo pipa vive nos pântanos da região amazônica…
Sapo Malaio: O sapo malaio tem três chifres, um em cima de cada olho…
Sapo Comum: O sapo comum tem uma pele dura e ressecada, coberta de pequenas escamas.


	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;
		}

Listas com bordas

Sapo Pipa: O sapo pipa vive nos pântanos da região amazônica…
Sapo Malaio: O sapo malaio tem três chifres, um em cima de cada olho…
Sapo Comum: O sapo comum tem uma pele dura e ressecada, coberta de pequenas escamas.


	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;
		}

Listas em forma de tabela

Sapo Pipa: O sapo pipa vive nos pântanos da região amazônica…
Sapo Malaio: O sapo malaio tem três chifres, um em cima de cada olho…
Sapo Comum: O sapo comum tem uma pele dura e ressecada, coberta de pequenas escamas.


	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;
		}

Listas com imagens flutuadas à direita e descrição

Banksia flower: Banksius maximus; Encontrada na costa da Austrália

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%;
	}

Listas como galeria de imagens


Titulo aqui: Descrição aqui


Titulo aqui: Descrição aqui


Titulo aqui: Descrição aqui


	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;
	}

Listas como calendário de eventos

23 de Março: Automóveis antigos; 07:00 horas; 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.
13 de Junho: Festival da laranja; 12:00 horas; Laranjas de produtores de todo o estado. Diversos tipos de sucos e doces de laranja. Renda em favor do asilo São Judas.


	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;
	}

Listas como tabelas com múltiplas DD

Sapo Pipa: O sapo pipa vive nos pântanos da região amazônica.; É com certeza um dos anfíbios mais estranhos que existe.
Sapo Malaio: O sapo malaio tem três chifres, um em cima de cada olho e outro na ponta do nariz; Os sapos malaios só são encontrados no Sudeste asiático


	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; }

Listas em formulários

Esta estilização para listas de definição em formulários foi acrescentada pelo Maujor, autor da tradução


	HTML
	
<form action="" 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;}

Outros exemplos e leitura complementar
(não estão em português)

Les listes de dèfinitions : mal utilisèes ou mal comprises ?
Simian Design – Style Definition Lists
Seamus Leahy – Sensually Styled Definition Lists
Terry Melanson – Definition List
SimpleQuiz – Part XI – Image Floating
Doug Bowman on definition lists
Definition : a definition and an analysis
HTML 4.01 Specification – Definition lists
David House’s excellent example

Créditos

Este artigo é uma tradução do original em ingles de Russ Weakley
publicado em http://www.maxdesign.com.au/presentation/definition/

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2006-04-26 (quarta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2006/04/26/dl-lists/trackback no seu site.

32 comentários na matéria: “Listas de definição – entenda e saiba usar”

Rodrigo disse: 2017 - 06 - 27 19:29 GMT
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
David Barreto disse: 2015 - 09 - 11 15:37 GMT
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…
Paulo disse: 2011 - 02 - 4 19:49 GMT
No começo é um pouco difícil de entender, mas aos poucos dá pra pegar o jeito.
Maujor disse: 2008 - 08 - 3 0:13 GMT
@Roger
Grato por avisar.
Problema resolvido.
Roger Alves disse: 2008 - 07 - 31 2:52 GMT
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.
Vanessa disse: 2008 - 01 - 25 14:14 GMT
Excelente!
Vinicius disse: 2007 - 12 - 11 14:20 GMT
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.
WEBtudinho » Formulários e semântica - Parte 2 disse: 2007 - 10 - 24 3:56 GMT
[…] Com o fórum estruturado você pode utilizar folhas de estilos para alinhar o elemento dt à esquerda e o elemento dd à direita. Para ver exemplos na prática, nada menos que ele. […]
Edgar disse: 2007 - 08 - 8 18:13 GMT
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ç
Raquel Patro disse: 2007 - 07 - 27 0:24 GMT
Excelente artigo!
Era exatamente isto que eu estava procurando.

Valew mesmo
Matheus disse: 2007 - 07 - 4 18:16 GMT
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?
Josue Gimenes disse: 2007 - 06 - 8 17:34 GMT
Parabéns pela matéria Maurício!

http://www.grifemidia.com.br/blog
Caracas muito show mesmo!!! disse: 2007 - 05 - 25 20:22 GMT
Cara gostei muito do tutorial achei muito bom e conhecimento assim vale muito!!!!
Diria que esse tipo de conhecimento, só da valor quem realmente entende um pouco como é dificil pra alguem postar uma matéria, doando conhecimento!

Meus parabéns pela iniciativa e pelo excelente exemplo que vc nos passa!
Rodrigo disse: 2007 - 05 - 25 3:02 GMT
Seria uma boa então pra um e-commerce usar esse tipo de lista pra mostrar produtos de uma categorias igual foi feito no exemplo de galeria de imagens?

Digitei DL DT DD no google e cai direto aqui 😀

Abraços
André Sam! disse: 2007 - 04 - 30 18:55 GMT
Caraca … eu nem imaginava que o lance era tão complexo assim.
Nem sabia também desse lance de termo e descrição …

quer dizer que se eu passar a seguir mais a risca essas regras, terei uma indexação mais forte e concisa dos buscadores e serei melhor posicionado também ?
henrique disse: 2007 - 03 - 25 0:19 GMT
excelente materia maujor ja use ela em formulario com esses exemplo
seus abre o caminho de possibilidades mesmo

parabens
Anderson Carlos Crepaldi disse: 2007 - 02 - 15 19:21 GMT
Muito bom!
Maujor, como sempre cuidadoso com a veracidade da informação, nos surpreende com mais um artigo de qualidade, e sobre um assunto pertinente, seu site tem colaborado muito no aprofundamento do css.
Ezequias Dinella disse: 2007 - 02 - 15 19:17 GMT
Muito legal!
Maujor, como sempre cuidadoso com a veracidade da informação, nos surpreende com mais um artigo de qualidade, e sobre um assunto pertinente.
Silfar disse: 2007 - 02 - 5 16:06 GMT
Maurício, muito legal, mas me tira uma dúvida e quando o formulário precisa ter um campo al lado do outro em vêz de embaxo ?
capile disse: 2006 - 10 - 13 14:57 GMT
Bem completa as aplicações das ‘dds’, só sobre a última aplicação e a mais polêmica (form) vem uma parte que ninguém usa e ou fala sobre…

campos inline com traduções..

se eu quero fazer campos tipo estado e cidade na mesma linha de forma profissional tenho que levar em consideração dois itens:
– tradução para outros idiomas
– alinhamento dos inputs

e é aí q mora o problema do form nas maneiras apresentadas por todos os blogueiros, colunistas e outros ‘eiros’ e ‘istas’ por aí….

como fazer um form que abrace campos inlines com seus devidos ‘lables’ sendo que eles podem mudar o tamanho (ex.: city, country, organization, etc.) mantendo seu alinhamento?

mesmo sendo a forma ‘errada’ dentro da visão semantica do emprego da table, é a única forma que eu consigo visualizar para essa construção….

o que você acha?
Lucas Pelhon disse: 2006 - 09 - 18 14:57 GMT
Excelente artigo.

Vc dá como exemplo o uso de dentro de um . Isso é correto?
Considerando que as listas servem para marcar um conjuto de termo definição, não vejo problema. Mas será que realmente está certo?

Outra coisa, fiquei com dúvida quando vc citou que “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”
Até que ponto o uso das listas irão atrapalhar quem utiliza um dispositivo desses?

Abraço e mais uma vez, excelente artigo.
Erick Leão (Perfect Lion) disse: 2006 - 06 - 9 18:10 GMT
Muito bom eu pensava que essas tags era para usar como uma lista mesmo mais depois desta transcrição que tu fez vi que não é bem por ai.. se for somar todo o conteúdo dá tbm para criar menus com ele usando ele mais UL mais me diz uma coisa eu posso usar eles dentro da UL ? ou teria que ser fora ?
Maujor disse: 2006 - 05 - 19 0:50 GMT
Andrique:
Conforme vc apontou, este é mais um tema polêmico da codificação Web Standards.
A corrente dos puristas não admite estilização de formulários com listas. No entanto, muitos consideram válido, usar listas de definição para formulários e fundamentam sua opinião na citação das Recomendações do W3C que transcrevi na matéria.
Eu não sou purista, mas no caso de formulários considero desnecessário usar o elemento DL uma vez que os elementos HTML para formulários suprem todas as necessidades de marcação, estilização e acessibilidade.
Se você tiver uma razão justificável para usar DL em uma determinada situação particular do seu projeto, não hesite, use.
Por outro lado não encontrei qualquer citação nas Recomendações do W3C que justifique usar UL e OL.
Andrique disse: 2006 - 05 - 18 16:36 GMT
Ótima matéria Maujor. Interessante que vocês estilizou um formulário com listas. Essa seria a forma correta pra cuidar de formulários? Eu vi muitas discussões pela net abordando isso e vejo que existem muitas dúvidas e divergência quanto a estilização de formulário.
Grande abraço e sou adimirador do seu trabalho.
Alex Silva disse: 2006 - 05 - 16 13:37 GMT
Sou iniciante na área WEB e tenho acompanhado as matérias do MAUJO.COM por três meses e posso dizer que todas elas são perfeita, sublime. Em uma simples palavra… DEMAIS!!!
Edy Segura disse: 2006 - 04 - 29 14:31 GMT
Muito obrigado Mauricio, através desta matéria eu tirei minha dúvidas sobre listas de definição. Graças a você agora eu saberei aplicar elas em minha estrutura corretamente. Obrigado mesmo.
Rodrigo disse: 2006 - 04 - 27 13:56 GMT
Perfeito!!!
Pedro Rogério disse: 2006 - 04 - 26 23:34 GMT
Eu estava querendo fazer uma galeria de imagens, agora encontrei a solução.
Newton de Góes Horta disse: 2006 - 04 - 26 17:38 GMT
Artigo muito bem escrito, claro, completo, com detalhamento abrangente e exemplos de qualidade ímpar. Quem tinha dúvidas sobre lista de definição e de seu uso, com certeza eliminou todas após a leitura deste artigo. Resta agora colocar em prática, como disse o Hélder.
Leo Askra disse: 2006 - 04 - 26 17:08 GMT
ótima matéria cara, parabéns
farley rangel disse: 2006 - 04 - 26 16:50 GMT
Mais outra vez!! Ótimo artigo Maurício.
Helder disse: 2006 - 04 - 26 16:16 GMT
Muito boa essa matéria, vou começar a aplicar listas de definição na estrutura dos meus códigos.

obrigado pela tradução =)