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

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?

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.

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 .

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.

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.

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.

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.

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

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.

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

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

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.

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.

Para renderizar corretamente em navegadores primitivos ou dispositivos móveis

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.

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