4.3 Lista ordenadas e não Ordenada

📘 Introdução ao HTML: Listas Ordenadas e Não Ordenadas

O HTML permite organizar informações de forma clara e visual através de listas. Elas são essenciais para apresentar tópicos, passos, instruções ou itens agrupados de forma lógica. Neste conteúdo, veremos os dois principais tipos:

• Listas ordenadas (<ol>)

• Listas não ordenadas (<ul>)

---

🔢 Lista Ordenada (<ol>)

A lista ordenada é usada quando a ordem dos itens importa, como em passos de um processo, rankings, instruções, etc. Cada item da lista é definido com a tag <li> (list item).

📌 Exemplo de uso:

htmlCopiarEditar<ol>
  <li>Preaqueça o forno</li>
  <li>Separe os ingredientes</li>
  <li>Misture tudo</li>
  <li>Leve ao forno</li>
</ol>

✅ O navegador exibirá os itens numerados automaticamente.

🔧 Você pode personalizar o tipo de numeração com o atributo type:

htmlCopiarEditar<ol type="A">
  <li>Item A</li>
  <li>Item B</li>
</ol>

🔹 Tipos possíveis:

• 1: Números (padrão)

• A / a: Letras maiúsculas ou minúsculas

• I / i: Algarismos romanos

---

📍 Lista Não Ordenada (<ul>)

A lista não ordenada é usada quando a ordem dos itens não é importante, como em listas de compras, tópicos gerais, etc.

📌 Exemplo de uso:

htmlCopiarEditar<ul>
  <li>Arroz</li>
  <li>Feijão</li>
  <li>Carne</li>
  <li>Legumes</li>
</ul>

✅ O navegador exibe marcadores (bolinhas) ao lado dos itens por padrão.

🔧 Com CSS, é possível alterar os marcadores (círculo, quadrado, etc.).

---

🧩 Estrutura Combinada

Também é possível aninhar listas, ou seja, colocar uma lista dentro da outra. Isso é útil para criar subtópicos:

htmlCopiarEditar<ul>
  <li>Frutas
    <ul>
      <li>Banana</li>
      <li>Maçã</li>
    </ul>
  </li>
  <li>Verduras</li>
</ul>

✅ Conclusão

As listas em HTML são ferramentas simples e eficazes para organizar informações em blocos lógicos e fáceis de ler.

• A lista ordenada (<ol>) deve ser usada quando a sequência dos itens importa, como em receitas, instruções ou rankings.

• A lista não ordenada (<ul>) é ideal para apresentar itens sem ordem específica, como listas de compras ou tópicos soltos.

Além disso:

• Os itens da lista são sempre definidos com a tag <li>.

• É possível personalizar o estilo das listas com atributos HTML ou CSS.

• Listas podem ser aninhadas, o que permite estruturar subtópicos de maneira hierárquica.

Saber aplicar corretamente as listas torna o conteúdo da página mais organizado, acessível e agradável para o usuário.