Dominando as Listas em HTML

Listas são um componente fundamental em HTML, usadas para agrupar e organizar um conjunto de itens relacionados. Elas não apenas ajudam a estruturar o conteúdo de forma lógica para os visitantes, mas também melhoram a semântica do seu código, o que é ótimo para acessibilidade e SEO. 💻

Existem três tipos principais de listas em HTML: listas não ordenadas, listas ordenadas e listas de descrição. Vamos explorar cada uma delas.

Listas Não Ordenadas (<ul>)

Uma lista não ordenada é usada quando a sequência dos itens não é importante. Pense em uma lista de compras ou nos ingredientes de uma receita onde a ordem não altera o resultado.

Ela começa com a tag <ul> (unordered list) e cada item da lista é definido pela tag <li> (list item). Por padrão, os navegadores marcam cada item com um marcador, geralmente um pequeno círculo preto.

Exemplo de Código:

HTML

<ul>
  <li>Café</li>
  <li>Chá</li>
  <li>Leite</li>
</ul>

Como aparece no navegador:

• Café
• Chá
• Leite

Listas Ordenadas (<ol>)

Uma lista ordenada é ideal quando a sequência dos itens é crucial. Pense em um passo a passo, um ranking ou as instruções para montar algo.

Ela começa com a tag <ol> (ordered list) e, assim como na lista não ordenada, cada item é definido pela tag <li>. Por padrão, os itens são marcados com números em ordem crescente.

Exemplo de Código:

HTML

<ol>
  <li>Ligar o computador</li>
  <li>Abrir o navegador</li>
  <li>Digitar o endereço do site</li>
</ol>

Como aparece no navegador:

1. Ligar o computador
2. Abrir o navegador
3. Digitar o endereço do site

Resumo das Tags de Lista

Para facilitar a consulta, aqui está uma tabela com as principais tags de lista e suas funções.