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

Listas de definição – entenda e saiba usar

Publicado em: 2006-04-26 — 62.951 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)

Créditos

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

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: 2006-04-26 (quarta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://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”

  1. RodrigoNo Gravatar disse:

    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

  2. David BarretoNo Gravatar disse:

    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…

  3. PauloNo Gravatar disse:

    No começo é um pouco difícil de entender, mas aos poucos dá pra pegar o jeito.

  4. MaujorNo Gravatar disse:

    @Roger
    Grato por avisar.
    Problema resolvido.

  5. Roger AlvesNo Gravatar disse:

    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.

  6. VanessaNo Gravatar disse:

    Excelente!

  7. ViniciusNo Gravatar disse:

    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.

  8. WEBtudinho » Formulários e semântica - Parte 2 disse:

    […] 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. […]

  9. EdgarNo Gravatar disse:

    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ç

  10. Raquel PatroNo Gravatar disse:

    Excelente artigo!
    Era exatamente isto que eu estava procurando.

    Valew mesmo

  11. MatheusNo Gravatar disse:

    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?

  12. Josue GimenesNo Gravatar disse:

    Parabéns pela matéria Maurício!

    http://www.grifemidia.com.br/blog

  13. Caracas muito show mesmo!!!No Gravatar disse:

    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!

  14. RodrigoNo Gravatar disse:

    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

  15. André Sam!No Gravatar disse:

    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 ?

  16. henriqueNo Gravatar disse:

    excelente materia maujor ja use ela em formulario com esses exemplo
    seus abre o caminho de possibilidades mesmo

    parabens

  17. Anderson Carlos CrepaldiNo Gravatar disse:

    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.

  18. Ezequias DinellaNo Gravatar disse:

    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.

  19. SilfarNo Gravatar disse:

    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 ?

  20. capileNo Gravatar disse:

    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?

  21. Lucas PelhonNo Gravatar disse:

    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.

  22. Erick Leão (Perfect Lion)No Gravatar disse:

    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 ?

  23. MaujorNo Gravatar disse:

    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.

  24. AndriqueNo Gravatar disse:

    Ó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.

  25. Alex SilvaNo Gravatar disse:

    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!!!

  26. Edy SeguraNo Gravatar disse:

    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.

  27. RodrigoNo Gravatar disse:

    Perfeito!!!

  28. Pedro RogérioNo Gravatar disse:

    Eu estava querendo fazer uma galeria de imagens, agora encontrei a solução.

  29. Newton de Góes HortaNo Gravatar disse:

    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.

  30. Leo AskraNo Gravatar disse:

    ótima matéria cara, parabéns

  31. farley rangelNo Gravatar disse:

    Mais outra vez!! Ótimo artigo Maurício.

  32. HelderNo Gravatar disse:

    Muito boa essa matéria, vou começar a aplicar listas de definição na estrutura dos meus códigos.

    obrigado pela tradução =)

Comentário:





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

Subscribe without commenting

topo