Listas não ordenadas: mais do que marcadores

O conceito de lista

Ao escrever um conteúdo web que possa ser definido em formato de uma lista, você poderá considerar o emprego de uma lista não ordenada (<ul>) para fins de apresentação. Esta prática não só incrementa a legibilidade do código HTML, como também aplica um significado semântico ao conteúdo.

Amaldiçoadas e subestimadas

Muitos sites evitam o uso de listas não ordenadas para marcação de conteúdo em lugares onde elas seriam plenamente indicadas. Nestes sites você, não raro, encontrará um grupo de tags <div> separadas por elementos <hr>'s ou uma quantidade de tags <a> separadas por delimitadores do tipo | (barra vertical) ou • (&bull;). A principal razão desta prática, provavelmente deve-se a falta de conhecimento das regras CSS (padding, bullets, etc.) envolvidas na estilização do elemento <ul>. Muitos webmasters acham mais fácil aplicar estilos a um elemento HTML primitivo, como uma <div> do que remover estilos de um elemento <ul>. Acresente-se a este fato a maneira inconsistente como são implementados os estilos default pelos browsers em diferentes plataformas e a confusão está estabelecida.

Felizmente as CSS possibilitam a se fazer com que as listas sejam estilizadas à maneira de se parecer virtualmente idênticas para os browsers modernos, e semelhantes às <div>'s e até mesmo aos elementos inline <span>'s. Ver Leitura complementar para detalhes de estilização de listas.

Vantagens de se usar listas não ordenadas

Fazendo sentido fora do contexto

Elementos tais como <div> e <span> não têm qualquer significado semântico, e seu único propósito é o de agrupar conteúdos em blocos. Qualquer significado que eles venham a ter, resultam da maneira como foram estilizados via CSS para serem apresentados no contexto, em um browser visual.

Agrupar conteúdos em uma lista, agrega a eles, conteúdos, um significado via marcação, independentemente da folha de estilos. Agentes de usuários que fazem a leitura somente de conteúdos (ignoram as folhas de estilos), como os browsers de texto, browsers leitores de textos, e também os robots de busca estão aptos a entender a organização das listas e processá-las para renderização (ou interpretação) de maneira apropriada.

As listas e a usabilidade

A renderização de um grupo de links (elementos <a>) em um browser de texto, faz-se apresentando-os todos juntos em uma sequência, dificultando ao usuário identificar e selecionar um deles. Muitos tutoriais recomendam o uso de um espaço em branco ou mesmo a inserção de um delimitador entre os links para evitar confusão. O mesmo aplica-se para o método do uso de elementos <hr>'s ou de bordas CSS para separar elementos <div></div> <div></div> e conseguir um efeito de separação de conteúdos.

A renderização de listas não ordenadas em browsers não visuais, faz-se em forma de uma lista e não como um amontoado de caixas para elementos nível de bloco ou sequência contínua de texto para elementos inline. A separação e o agrupamento dos elementos é automática; sem necessidade do uso de separação artificial com delimitadores ou elementos <hr>.

Boa prática

O significado semântico das listas é uma boa razão para agrupar itens, que continuarão consistentes mesmo quando as folhas de estilo forem ignoradas. Usar listas não ordenadas nos lugares onde elas façam sentido é uma prática inteligente de estruturação de documentos.

Leitura complementar


[ XHTML 1 ]
Created Date: 2004-06-09 by Brian Huisman
Last modified $Date: 2004/08/03 06:49:15 $ by $Author: ot $

Copyright © 2000-2003 W3C® (MIT, ERCIM, Keio), Todos os direitos reservados. São aplicáveis as disposições do W3C relativas a responsabilidades, marcas, uso de documentos e licenças de software. Sua interação com este site faz-se de acordo com nossa política pública e para Membros.