Continuamos estudando as listas do HTML, que nos possibilita criar estruturas atrativas para apresentar a informação.

Listas ordenadas

Neste caso, usaremos as etiquetas <ol> (ordered list) e seu fechamento. Cada elemento será igualmente precedido de sua etiqueta <li>.

Como exemplo:

<p>Regras de comportamento no trabalho</p>
<ol>
<li>O chefe sempre tem a razão</li>
<li>Em caso de dúvida, aplicar a regra 1</li>
</ol>

O resultado é:

Regras de comportamento no trabalho

1. O chefe sempre tem a razão
2. Em caso de dúvida aplicar a regra 1

Do mesmo modo das listas desordenadas , as listas ordenadas oferecem a possibilidade de modificar o estilo. Concretamente, nos é possível especificar o tipo de numeração empregado escolhendo entre números (1,2,3...), letras (a,b,c...) e suas maiúsculas (A,B,C...) e números romanos em suas versões maiúsculas (I,II,III...) e minúsculas (i,ii,iii...).

Para realizar tal seleção temos de utilizar, como para o caso anterior, o atributo type, o qual será situado dentro da etiqueta <ol>. Neste caso, os valores que o atributo pode tomar são:

1 Para ordenar por números
a Por letras do alfabeto
A Por letras maiúsculas do alfabeto
i Ordenação por números romanos em minúsculas
I Ordenação por números romanos em maiúsculas

Nota: Lembramos que em alguns navegadores não funciona a opção de mudar o tipo de marcador.

Pode ser que em algum caso desejemos começar nossa numeração por um número ou letra que não tem porque ser necessariamente o primeiro de todos. Para resolver esta situação, podemos utilizar um segundo atributo, start, que terá um número como valor. Este número, que por padrão é 1, corresponde ao valor a partir do qual começamos a definir nossa lista. Para o caso das letras ou dos números romanos, o navegador se encarrega de fazer a tradução do número à letra correspondente.

Propomos um exemplo usando este tipo de atributos:

<p>Ordenamos por números</p>
<ol type="1">
<li>Elemento 1</li>
<li>Elemento 2</li>
</ol>

<p>Ordenamos por letras</p>
<ol type="a">
<li>Elemento a</li>
<li>Elemento b</li>
</ol>

<p>Ordenamos por números romanos começando pelo 10</p>
<ol type="i" start="10">
<li> Elemento x</li>

<li> Elemento xi</li>

</ol>

O resultado:

Ordenamos por números

1. Elemento 1
2. Elemento 2

Ordenamos por letras

1. Elemento a
2. Elemento b

Ordenamos por números romanos começando pelo 10

10. Elemento x
11. Elemento xi