Lista ordenadas em HTML

Como adicionar uma lista ordenada no documento HTML?

Para criar uma lista ordenada, utilize o elemento <ol>. Cada item da lista é representado pelo elemento <li>. O navegador exibirá os itens com marcadores numéricos por padrão:

<ol>
    <li>Limpar estantes</li>
    <li>Arrumar armário</li>
    <li>Organizar livros</li>
</ol>

Personalizando os marcadores de uma lista ordenada

Você pode usar o atributo type na tag <ol> para alterar o estilo dos marcadores. Veja abaixo os valores disponíveis:

Alguns exemplos:

A seguir, um exemplo de lista com marcadores em letras maiúsculas:

1. Lista com letras maiúsculas (type="A"):

<ol type="A">
    <li>Limpar estantes</li>
    <li>Arrumar armário</li>
    <li>Organizar livros</li>
</ol>

2. Lista com algarismos romanos minúsculos (type="i"):

<ol type="i">
    <li>Limpar estantes</li>
    <li>Arrumar armário</li>
    <li>Organizar livros</li>
</ol>

3. Algarismos romanos maiúsculos (type="I"):

<ol type="I">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

4. Letras minúsculas (type="a"):

<ol type="a">
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
</ol>

5. Letras maiúsculas (type="A"):

<ol type="A">
  <li>Limpar estantes</li>
  <li>Arrumar armário</li>
  <li>Organizar livros</li>
</ol>

Listas ordenadas aninhadas:

As listas ordenadas podem ser aninhadas adicionando uma <ol> dentro de um <li>. Isso é útil para criar subcategorias:

<ol>
    <li>Suco</li>
    <li>Chá
        <ol>
            <li>Chá preto</li>
            <li>Chá verde</li>
        </ol>
    </li>
    <li>Leite</li>
</ol>