Como criar listas numeradas

HTML está para a blogosfera assim como o inglês está para o mundo, todos sabem que precisam aprender, mas são poucos os que se lembram de estudar. Pensando nisso, resolvi voltar a escrever posts sobre a linguagem para ir ensinando em doses homeopáticas e não traumatizar ninguém.

Este post eu resolvi fazer porque tenho visto na web (não apenas em blogs) muitas listas numeradas sendo criadas "na unha", assim:

1. Arroz<BR>
2. Feijão<BR>
3. Carne<br>
4. Batata<br>
6. Beterraba<br>
7. Alface<BR>
9. Limão<br>
10. Leite

Os problemas de se criar uma lista assim:

• Estético - Somente os números ficam alinhados, as linhas de texto não.
• Cansativo - Você tem que digitar número por número, correndo maior risco de errar (observe que no exemplo acima pulei os ítens 5 e 8).
• Refazer - Se você errar/pular/excluir algum ítem terá que fazer toda a lista novamente.

O jeito ideal de se fazer uma lista numerada é:

Código	Resultado
<ol> <li> Arroz <li> Feij&atilde;o <li> Carne <li> Batata <li> Beterraba <li> Alface <li> Limão <li> Leite </ol>	Arroz Feijão Carne Batata Beterraba Alface Limão Leite

Numa lista numerada, você pode utilizar os seguintes atributos dentro da tag <ol>:

start

Como mostrado no exemplo acima, start serve para indicar de qual valor a lista deve começar. Se você não colocar, a lista começa do padrão, que é, obviamente, 1.

<ol start='99'> <li>Exemplo</li> <li>de lista</li> </ol>

Exemplo de lista

type

Se você não quiser usar a numeração padrão, que é em algarismos arábicos, também pode escolher outra.

Alfabeto maiúsculo	<ol type='A'> <li>Exemplo</li> <li>de lista</li> </ol>	Exemplo de lista
Alfabeto minúsculo	<ol type='a'> <li>Exemplo</li> <li>de lista</li> </ol>	Exemplo de lista
Números romanos maiúsculos	<ol type='I'> <li>Exemplo</li> <li>de lista</li> </ol>	Exemplo de lista
Números romanos minúsculos	<ol type='i'> <li>Exemplo</li> <li>de lista</li> </ol>	Exemplo de lista

Leia também:

• Listas sem ordenação com bullets
• Listas de definição
• Tipos de listas numeradas com CSS