Por que devo usar 'li' em vez de 'div'?

114

Não sei por que preciso usar ul-li em vez de simplesmente usar divs ao listar itens. Posso fazer com que ambos tenham a mesma aparência, então onde está a vantagem funcional de criar uma lista não ordenada em vez de alinhar divs?

zsharp
fonte
1
Pergunta brilhante. Eu tenho procurado por isso há um tempo. Espero que haja alguma resposta razoável abaixo.
runios

Respostas:

148

Para correção semântica. O HTML tem a capacidade de expressar listas de coisas e ajuda o robô do Google, os leitores de tela e todos os tipos de usuários que não se preocupam apenas com a apresentação do site a entender melhor o seu conteúdo.

Jeremy DeGroot
fonte
4
+1. Para os deficientes visuais, pode ser útil distinguir o que está em uma lista e o que não está. Digamos que se você tiver uma lista de ingredientes em uma receita, por exemplo, e o usuário quiser pular para as instruções ou apenas ler a lista, você precisa de uma lista.
Dave Markle
+1. zsharp: Você mesmo diz "ao listar itens". Você lista as coisas ao adicioná-las a uma lista.
Arve Systad
3
@Arve. Meu objetivo era chegar à diferença funcional, apesar do nome "lista". Caso contrário, eu estaria seguindo regras que não entendia.
zsharp de
2
NO ENTANTO, no passado (e talvez ainda), cada navegador adicionou sua própria formatação para listar elementos, como espaçamento, margens, etc, então é exatamente por isso que muitas pessoas preferem usar divs. porque ninguém quer adicionar um monte de código para zerar a formatação ou detectar navegadores, e essas pequenas diferenças muitas vezes quebram os layouts de página, fazendo coisas feias como colocar linhas brancas entre "fatias" de imagem e colocar itens abaixo de outros.
AwokeKnowing
@AwokeKnowing Na verdade, projetos de redefinição de CSS são Legião precicely porque profissionais devs front-end que pretende adicionar um monte de código de zero a formatação. Eles "redefinem" os estilos padrão de todos os navegadores para uma base "sem estilo" conhecida.
Joshperry de
132

Não tenho certeza porque eu preciso usar ul-li vs simplesmente usar divs ao listar itens. Eu posso fazer com que ambos pareçam exatamente iguais

Essa é a palavra-chave da sua pergunta: "olhe". Você também pode fazer com que eles digitem da mesma forma para cegos usando um leitor de Braille? Você pode fazer com que soem iguais para pessoas cegas usando um sintetizador de texto para voz? Você ainda pode fazer com que tenham a mesma aparência para deficientes visuais usando folhas de estilo de usuário CSS personalizadas do lado do cliente?

Essa palavra, "olhar", é uma palavra muito perigosa - quando você a usa em relação ao HTML, todos os alarmes devem disparar na sua cabeça. HTML é uma linguagem para descrever a estrutura semântica de um documento hipermídia. Uma estrutura semântica não tem "aparência", é um conceito abstrato.

Mesmo que você não se importe com todo esse truque semântico e não se importe com os cegos, considere o seguinte: Google, Yahoo, MSN e companhia não têm olhos, eles não "olham" para o seu CSS renderizado .

Jörg W Mittag
fonte
2
Usei o termo "olhar" para enfatizar o ponto de chegar à diferença subjacente. Mesmo assim, sua filosofia é apreciada.
zsharp de
17

Ao usar a marcação semanticamente correta, você está inserindo informações extras em seu texto. Ao usar ul / li, você está comunicando ao aplicativo de consumo que a informação é uma lista, e não apenas "algo" (quem sabe o quê) que é algum texto dentro de um elemento arbitrário.

Rex M
fonte
15

Resposta direta à sua pergunta: A vantagem funcional é que divs significam pouco por conta própria, enquanto ul lis significa explicitamente "esta é uma lista não ordenada de itens".

O termo "semântica" refere-se à maneira como você usa o significado inerente de estruturas existentes para criar um significado explícito. HTML é composto de tags que significam certas coisas por si mesmas. E existem regras / diretrizes / maneiras estabelecidas de usá-los para que seu documento HTML publicado transmita o que você quer que ele signifique.

Se você listar algo em seu documento, adicione uma lista ordenada (UL) ou uma lista não ordenada (OL). Por outro lado, o elemento de divisão de página (DIV) é usado para criar um conteúdo específico e separado.

O elemento div "divide". Quando você olha para uma página, há partes específicas como corpo de conteúdo, rodapé, cabeçalho, navegação, menus, formulários, etc. E você pode usar tags div para criar essas divisões. Freqüentemente, as partes da página correspondem a um layout visual, portanto, usar divisões de página explícitas (DIVs) para cortar seu layout em CSS é um ajuste natural. Por aqui o div tags se tornam estruturais.

Se você usar mal ou abusar do div tag , pode criar significado não intencional e inchaço de código.

Para confundir as coisas: o Google usa h3 e div para "dividir" seus resultados de pesquisa listados. ul> li> h3 + div

Então, quando você desativa todos os estilos (Shift + Cmd / Crtl + S no Firefox com barra de ferramentas WebDeveloper), os divs devem desaparecer e se empilhar naturalmente. Seu HTML simples ainda deve renderizar uma boa página com uma hierarquia clara: de cima para baixo, o conteúdo mais importante primeiro e listas com marcadores e números para os itens listados. E é uma boa ideia adicionar um link próximo ao topo (para usuários não visuais) que permite pular para: conteúdo principal, formulários importantes ou cabeçalhos principais (como um índice).

Por fim, lembre-se de que você está criando um documento. Sem todos os efeitos visuais, ainda deve ser um documento convincente.

Benxamin
fonte
6

Fala-se muito sobre usar <li>ou usar, <div>mas nenhum comentário deu um exemplo sólido do conteúdo que vai dentro dessas tags. Minha sensação é essa <ul>e <li>não são realmente tão importantes, pois não posso dizer da última vez que li uma "lista" de coisas em um site, jornal ou revista - online ou impressa.

<div>é muito mais versátil. Se você está listando ingredientes para um bolo, sim, essa é uma lista. Se você está listando coisas para embalar para uma caminhada, sim, essa é uma lista.

Mas e quanto a uma forma de usuário, por exemplo, que lista algumas coisas aleatórias que não são realmente uma lista, nem uma série de parágrafos, nem todos os "cabeçalhos". Algumas coisas são datas, algumas são caixas de seleção e outras são texto. Divida, se você me perguntar. Uma pessoa cega ficaria mal informada se fosse marcada com <ul>e <li>ouvisse "Aqui está uma lista de ..." quando é apenas uma miscelânea de coisas, não realmente uma lista.

highseas1851
fonte
Um menu de navegação não seria considerado uma lista de páginas que eles podem visitar, especialmente se houver uma hierarquia?
Scott M. Stolz
4

Você deve usar tags apropriadas para o conteúdo que deseja inserir. Isso não significa apenas que ul / li seja mais apropriado para listas. Isso também significa que você deve considerar o conteúdo de sua lista e ver se é uma lista não ordenada / ordenada ou de definição.

Outro argumento é que quando você desabilita o css. O navegador irá renderizar seu estilo padrão, o que o torna mais agradável de olhar se dispositivos de navegação alternativos são usados. Também melhora a acessibilidade.

TomHastjarjanto
fonte
4

Se você usar div, o lynx não será capaz de processar a página de uma forma legível.

Joshua
fonte
3

Eu pessoalmente gosto de li para a semântica. Ao visualizar a fonte, você imediatamente vê que tem uma lista de algo, se eles estiverem envolvidos por um li. Uma coleção div não fornece nenhum significado semântico e, normalmente, a única semântica da lista é introduzida pelas classes css como "listItem". O que obviamente aponta para o fato de que um li deveria ter sido usado em primeiro lugar.

Se você tem um loop em sua lógica de apresentação, sempre prefiro um li em vez de um div.

Scott Muc
fonte
4
Concordo. Na verdade, eu vi <div class = "ul"> <div class = "li"> ... </div> </div> uma vez e o pensamento mais coerente que consegui reunir foi "WTF ?? !! ?? !! !?! "
Jörg W Mittag
3

<li> significa um item em uma lista e permite que os analisadores (navegadores, mecanismos de pesquisa, spiders) saibam que você está listando itens. Você pode usar DIV em vez de LI, mas esses analisadores nunca saberiam que esses itens estão sendo listados e DIV não descreve nada, exceto que é um bloco.

Netrox
fonte
3

Depende do projeto. Recentemente fiz um projeto que tinha um menu desenhado usando uma lista. Eles queriam adicionar vários efeitos, como deslizamento / desvanecimento, e também queriam torná-lo recolhível com vários níveis.

Neste caso, os DIV's eram muito mais adequados. Consegui criar containers para div's filhos e aplicar jQuery para obter os efeitos desejados.

Mesmo que o seu projeto ainda não tenha esses requisitos, pode ser prudente pensar em como você pode alterá-lo no futuro ...

tpow
fonte
2

O uso <li>(quando apropriado) reduz a <div>sopa de tags que você costuma ver nas páginas da web, o que ajuda muito os desenvolvedores.

Não que isso <div>seja ruim, mas sempre que uma tag é usada demais (como <div>costuma acontecer), dilui o significado semântico da tag a ponto de ser totalmente inútil. Aprendi isso recentemente com um empreiteiro que contratamos para ajudar com CSS / IU de nosso aplicativo da web, e a diferença que isso fez na legibilidade / manutenção do código HTML é muito perceptível para mim.

KarstenF
fonte
2

Se você só se preocupa em fazer com que as listas tenham uma determinada aparência com o mínimo de esforço, isso já é um acéfalo: <li>é um caractere a menos para digitar <div> e sua tag de fechamento é opcional em HTML.

E isso além do que todos disseram sobre a semântica.


fonte
2

Para renderizar corretamente em navegadores primitivos ou dispositivos móveis

Codingday
fonte
2

Sua pergunta já foi respondida por eu quero adicionar meus dois centavos aqui. Eu estava trabalhando em um projeto em que fazia a lógica de back-end e meus dados estavam sendo agregados em um modelo de página feito pelo meu designer. ele usou as tags ul e li para representar todo tipo de lista na página, algumas das quais eram widgets. Os dados vinham de um cms onde os usuários podiam inserir rich text por meio de tags html. quando os usuários começaram a criar listas em seu conteúdo, as listas não pareciam mais listas com marcadores, em vez de bagunçar toda a página.

lição aprendida: não use tags de lista com seletores css genéricos se o seu conteúdo puder conter html.

Imran Suhail
fonte
0

outra coisa sobre ul li é; você pode usar ul como um contêiner que ajuda a definir a classe de estilo

<ul class="myHebe">
  <li><a href="#">.net</a></li>
  <li><a href="#">.net</a></li>
</ul>

Eu gosto desse padrão quando uso ul

.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitems

Claro que depende de como queremos usá-lo e de como gostamos. É assim que eu gosto

Espero que ajude obrigado

Barbaros Alp
fonte
3
div pode ser usado como um recipiente, também
Janning
3
com licença, @Barbaros myHebe significa alguma coisa?
Sevki