# 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*:

```html

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

```

✅ O navegador exibirá os itens numerados automaticamente.

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

```html
<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*:

```html
<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:

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