# Como criar lista ordenada HTML HTML

Ao contrário de listas não ordenadas, que são organizadas por marcadores, listas ordenadas em HTML são dispostas em sequências de números ou letras. Esse tipo de lista pode ser criada pela tag `<ol>` e finalizada com a tag `</ol>`. Seu uso facilita a compreensão de informações, aprimorando a estrutura e a clareza do design de um site.

## O que é lista ordenada HTML?

Uma lista ordenada HTML é estruturada e numerada. Ela pode ser criada pela tag &lt;ol&gt; em HTML, tendo cada item que ser disposto entre tags `<li>`. Por padrão, listas ordenadas são criadas com números crescentes (1, 2, 3…), mas podem ser personalizadas para exibir letras ou números romanos.

Uma lista ordenada HTML segue uma **sequência lógica definida**. Ao contrário do que ocorre nas listas não ordenadas, os itens são exibidos em uma ordem específica. Esse tipo de lista é perfeito para compartilhar instruções ou qualquer outro conteúdo que exija uma sequência.

Dica Listas ordenadas são apenas um dos tipos de [listas HTML](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/lista-html/). [Listas não ordenadas HTML](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/ul-html-lista-nao-ordenada-html/) oferecem aos usuários uma forma de listar itens sem atribuir uma ordem a eles. Também há um terceiro tipo: a lista de definição (ou lista de descrição). Ela é usada para combinar cada item com sua respectiva definição/descrição.

## Por que listas ordenadas são importantes para o SEO?

Documentos HTML bem-estruturados são essenciais para práticas de otimização para mecanismos de busca (SEO) e acessibilidade do site. Além das palavras-chave, da qualidade do conteúdo e das [meta tags HTML](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/meta-tags-html/), a estruturação dos textos de **forma organizada e lógica** auxilia os mecanismos de busca a compreender e avaliar seu site. Juntamente com outros elementos, como títulos, subtítulos e textos em negrito, a lista ordenada HTML desempenha um papel importante na melhoria do design de um site.

## Em que situações usar lista ordenada HTML?

Uma lista ordenada HTML é especialmente útil em situações nas quais é necessário organizar itens em uma sequência específica. Estes são alguns exemplos nos quais usar esse tipo de lista pode ser vantajoso:

- Instruções passo a passo (por exemplo, receitas) ou tutoriais
- Rankings e listas (por exemplo, listas top 10)
- Processos ou fluxos de trabalho que seguem uma ordem específica

## Qual é a sintaxe de uma lista ordenada HTML?

Para **criar uma lista ordenada HTML**, você precisa usar as seguintes tags HTML:

- `<ol>`: Sinaliza o início de uma lista ordenada
- `</ol>`: Sinaliza o fim da lista
- `<li>`: Inicia cada item da lista
- `</li>`: Finaliza cada item da lista

Veja um exemplo de lista ordenada HTML:

```html
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
<li>…</li>
</ol>
```

Por padrão, a maioria dos navegadores exibe a lista com **números em ordem crescente (1, 2, 3…)**.

## Como alterar estilo de numeração de lista ordenada HTML?

Se você deseja alterar o valor inicial ou o tipo de numeração da sua lista, recorra a atributos HTML. Com eles, é possível determinar se os itens serão ordenados com números ou letras e definir um **valor inicial específico** ou **inverter a ordem** da sua lista.

### Especificar tipo de número/letra com o atributo `type`

Você pode usar **números arábicos ou romanos** ou **letra maiúsculas ou minúsculas** para criar uma lista ordenada HTML. Para escolher o estilo usado, adicione o atributo `type` à tag `<ol>`:

```html
<ol type="X">
<li>Primeiro item</li>
<li>Segundo item</li>
<li>...</li>
</ol>
```

Substitua `X` pelo tipo de numeração que você deseja usar:

- `type=1`: Numerais arábicos crescentes (1, 2, 3…). Esse é o padrão adotado por HTML quando nenhum atributo é especificado.
- `type=A`: Letras maiúsculas (A, B, C…)
- `type=a`: Letras minúsculas (a, b, c…)
- `type=i` / `type=I`: Numerais romanos minúsculos (i, ii, iii…) ou maiúsculos (I, II, III…)

### Definir valor inicial com o atributo `start`

Se você quiser iniciar sua lista com um número ou letra diferente de “1” ou “A”, defina o **valor desejado** usando o atributo `start`:

```html
<ol start="X">
<li>Primeiro item</li>
<li>Segundo item</li>
<li>...</li>
</ol>
```

Substitua `X` pelo valor com o qual você deseja iniciar a lista. Por exemplo, este seria o código usado se a lista começasse com o número 5:

```html
<ol start="5">
<li>Primeiro item</li>
<li>Segundo item</li>
<li>...</li>
</ol>
```

### Inverter ordem da lista com o atributo `reversed`

Se você quiser que a numeração da lista siga a **ordem decrescente** ao invés da crescente, use o atributo `reversed`. Esta é sua sintaxe:

```html
<ol start="1" reversed>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>...</li>
</ol>
```

Com essa configuração, a lista fará uma contagem regressiva, começando pelo valor mais alto.

Dica Quer aprender mais sobre HTML? Confira nosso tutorial de HTML para iniciantes para conhecer os conceitos básicos dessa linguagem.


This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/lista-ordenada-html/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/lista-ordenada-html/) for AI/LLM consumption.