> For the complete documentation index, see [llms.txt](https://favelaware.gitbook.io/favelaware/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://favelaware.gitbook.io/favelaware/4-html/4.3-lista-ordenadas-e-nao-ordenada.md).

# 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://favelaware.gitbook.io/favelaware/4-html/4.3-lista-ordenadas-e-nao-ordenada.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.