Listas HTML

Para que servem as listas

Uma lista marca um grupo de itens relacionados como grupo. Navegadores e tecnologias assistivas podem anunciar quantos itens existem e percorrê-los um a um. Essa estrutura ajuda a varrer, outlines e receitas. A significação some se você fingir bullets com traços aleatórios em parágrafos, ou esticar ul só para empurrar texto em colunas visuais. Escolha markup de lista quando o conteúdo for de verdade um conjunto ou uma sequência. Guarde espaçamento decorativo e grid para CSS depois.

Resposta direta

• ul — lista não ordenada (bullets por padrão no navegador)
• ol — lista ordenada (números por padrão)
• li — cada item da lista
  Aninhe outro ul ou ol dentro de um li quando precisar de subitens. Não deixe um li flutuando fora da lista pai. Tags de fechamento devem aninhar na ordem inversa das de abertura, especialmente ao adicionar uma sublista sob um passo.

Quando usar cada lista

Escolha o elemento que combina com a ideia que você escreve, não com o visual que espera do CSS depois. Bullets e números são apresentações padrão; a decisão HTML é se a ordem faz parte da significação.

Lista não ordenada

Uma lista de compras com bullets é a demo clássica de ul. Cada item é um li. Comece aqui quando os itens são pares — nomes de frutas, rótulos de hobby ou destaques de recursos que poderiam ser reordenados sem quebrar a lição.

Ler a amostra não ordenada

• ul abre o contêiner de lista não ordenada
• Cada li é um item daquele grupo
• Tags de fechamento devem aninhar corretamente: termine cada li antes de fechar o ul
• Bullets padrão são estilo do navegador; CSS depois pode mudar marcadores, mas a significação HTML continua «conjunto não ordenado»
• li vazios e fechamentos faltando são typos comuns — veja a página cedo para pegá-los

Lista ordenada com sublista aninhada

Passos numerados frequentemente precisam de um pequeno grupo de bullets sob um passo — arquivos a criar, ferramentas a abrir ou ingredientes só daquele passo. Coloque a lista interna dentro do li daquele passo, não como irmã ao lado de todo o ol. Os números externos ficam legíveis enquanto os bullets internos esclarecem o detalhe.

Ler a amostra aninhada

• O ol externo numera os passos principais em sequência
• O segundo li contém texto introdutório mais um ul filho
• Os li internos pertencem ao ul aninhado; esse ul fecha antes do li pai fechar
• O terceiro passo continua a sequência ordenada externa depois que o bloco aninhado termina
• Esse padrão escala para ninhos mais profundos, mas mantenha árvores de iniciantes rasas para a ordem abrir/fechar ficar óbvia
• Se os números parecerem «errados», verifique se um li fechou cedo demais e empurrou a lista aninhada para fora

Significação primeiro, estilo depois

Navegadores desenham bullets e números sem CSS extra. Essa comodidade tenta as pessoas a abusar de listas como máquinas de indentação ou sidebars falsas. Resista aqui. Se o conteúdo é um conjunto ou uma sequência, o markup de lista é a escolha semântica certa mesmo antes de reestilizar marcadores. Se precisar de cards lado a lado, um grid de nav ou colunas de revista, espere as lições de CSS e layout estrutural — não force ul a ser framework de página só porque menus às vezes usam listas depois com estilo cuidadoso.

Acessibilidade e hábitos de varredura

Listas ajudam a varrer e ajudam a tecnologia assistiva a anunciar frases como «lista de três itens». Mantenha cada li focado em uma ideia quando puder. Evite enfiar parágrafos enormes sem relação em cada item a menos que o conteúdo precise mesmo dessa profundidade. Aninhe só quando a hierarquia for real — aninhamento falso só para indentar confunde humanos e ferramentas. Um cabeçalho curto acima da lista muitas vezes esclarece o tema do grupo antes do primeiro bullet.

Pratique no seu editor

1. Faça um ul de três hobbies (ou três comidas — mantenha os itens curtos).
2. Faça um ol de três passos matinais na ordem em que você realmente os faz.
3. Aninhe um pequeno ul sob um desses li (por exemplo, arquivos a abrir ou ferramentas a pegar).
4. Valide mentalmente: cada li fica dentro de um ul ou ol; listas aninhadas ficam dentro de um li.
5. Troque o tipo de uma lista (ul ↔ ol) e pergunte se a significação ainda combina com o conteúdo.
6. Veja a página no navegador e confirme que bullets/números aparecem sem escrever CSS ainda.
7. Quebre o ninho de propósito uma vez, note como o outline parece errado, depois corrija os fechamentos.

Erros fáceis

• Escrever li fora de qualquer ul/ol (itens órfãos)
• Usar listas só para indentar parágrafos aleatórios ou fingir colunas
• Esquecer de fechar listas aninhadas na ordem certa
• Colocar um ul aninhado como irmão de li em vez de dentro de um li
• Escolher ol para itens sem sequência (ou ul para números de passo estritos) sem pensar na significação
• Copiar markup de lista de tutoriais só de layout que tratam ul como grid de menu sem ensinar semântica primeiro
• Deixar a lista externa sem fechar após um bloco aninhado longo

Resumo

• ul + li para conjuntos não ordenados (bullets por padrão)
• ol + li para sequências ordenadas (números por padrão)
• Aninhe uma sublista dentro de um li, não ao lado da lista pai
• Escolha o tipo de lista que combina com a significação
• Não use listas como substituto de colunas de layout CSS
• Depois da nota histórica de plug-ins, as listas devolvem você ao HTML estrutural do dia a dia que você continuará reutilizando