Listas
Quando a informação é uma sequência de itens, uma lista comunica muito mais rápido do que um parágrafo corrido.
Estudar esta lição interativa →Tente descrever os ingredientes de uma receita ou o passo a passo de troca de pneu num único parágrafo corrido: "primeiro pegue o macaco, depois afrouxe os parafusos, depois...". Funciona, mas é mais difícil de escanear com os olhos do que uma lista de fato. O HTML tem duas tags para isso, e a escolha entre elas comunica uma diferença real: a ordem importa ou não?
Lista não-ordenada
<ul>Para itens sem uma sequência obrigatória, como ingredientes ou um menu de navegação. Cada item aparece com um marcador (•).
Lista ordenada
<ol>Para itens em que a ordem importa, como um passo a passo. Cada item vem numerado automaticamente.
Item de lista
<li>Cada item, seja de ul ou de ol, vive dentro de uma tag li (list item).
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Ingredientes (ordem livre) numa ul; modo de preparo (ordem importa) numa ol.
Repare que a numeração da <ol> é automática: o navegador conta por você. Isso é uma vantagem prática enorme, se você reordenar os itens ou adicionar um no meio, os números se ajustam sozinhos, sem você precisar digitar "1.", "2.", "3." manualmente. Um exemplo de produto real: o menu principal de quase todo site é, por baixo dos panos, uma <ul> com um <li> por item (a aparência horizontal, lado a lado, vem do CSS por cima disso).
Um <li> solto, fora de uma <ul> ou <ol>, não tem sentido algum para o navegador, ele precisa estar dentro de uma lista para funcionar como item. E, mesmo o HTML permitindo omitir o fechamento de <li> em alguns casos, a prática recomendada (e a que vamos seguir aqui) é sempre fechar cada tag que você abre. Isso deixa o código mais fácil de ler e evita erros bobos quando a lista cresce.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Monte as duas listas.