Conceito de listas · Vantagens das listas ·Leitura complementar ·
Índice das dicas · QA Homepage· QA IG· Markup Validator· QA-dev·
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.
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 • (•).
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.
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.
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>.
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.