Definição e uso de: <OL></OL>
HTML com Estilo
O marcador <OL></OL> "Ordered List Element" ou lista ordenada, por si só é um conjunto vazio, define a abertura e fechamento de uma lista.
Deve conter no mínimo uma tag <LI></LI> dentro do conjunto.
<OL><LI>Conteúdo...</LI></OL>
A marcação inicial <OL>, como a marcação final </OL> é obrigatória.
Dentro de uma lista ordenada degraus podem ser colocados se forem necessários, os degraus podem ser uma lista ordenada ou não, depende da necessidade.
Propriedades da lista ordenada
Ordenação em numéricos arábicos
:
A ordenação padrão é com números arábicos. Esta condição, se desejada, não precisa ser declarada.
Exemplo de lista ordenada em numéricos arábicos:
<ol>
<li>Laranja</li>
<li>Limão</li>
<li>Maracujá</li></ol>
Visualização no navegador
Laranja
Limão
Maracujá
Exemplo de lista ordenada em númericos arábicos, com degrau:
<ol>
<li>Laranja
<ol>
<li>Pêra</li>
<li>Lima</li></ol>
</li>
<li>Limão</li>
<li>Maracujá</li></ol>
Visualização no navegador
Laranja
Pêra
Lima
Limão
Maracujá
Ordenação em ordem alfabética, com letras minúsculas
:
A ordenação em ordem alfabética, se desejada, precisa ser declarada.
<ol
type="a"
></ol>
Exemplo de lista ordenada com letras minúsculas:
<ol
type="a"
>
<li>Laranja</li>
<li>Limão</li>
<li>Maracujá</li></ol>
Visualização no navegador
Laranja
Limão
Maracujá
Exemplo de lista ordenada com letras minúsculas, com degrau:
<ol
type="a"
>
<li>Laranja
<ol>
<li>Pêra</li>
<li>Lima</li></ol></li>
<li>Limão</li>
<li>Maracujá</li></ol>
Visualização no navegador
Laranja
Pêra
Lima
Limão
Maracujá
Note que como no degrau dos tipos de laranja não foi declarado o tipo de lista, a lista assumiu o tipo padrão
Ordenação em ordem alfabética, com letras maiúsculas
:
A ordenação em ordem alfabética, se desejada, precisa ser declarada.
<ol
type="A"
></ol>
Exemplo de lista ordenada com letras maiúsculas:
<ol
type="A"
>
<li>Laranja</li>
<li>Limão</li>
<li>Maracujá</li></ol>
Visualização no navegador
Laranja
Limão
Maracujá
Exemplo de lista ordenada com letras maiúsculas, com degrau:
<ol
type="A"
>
<li>Laranja
<ol
type="a"
>
<li>Pêra</li>
<li>Lima</li></ol></li>
<li>Limão</li>
<li>Maracujá</li></ol>
Visualização no navegador
Laranja
Pêra
Lima
Limão
Maracujá
Note que no degrau dos tipos de laranja foi declarado o tipo de lista com letras minúsculas.
Ordenação em ordem numérica, com algarismos romanos minúsculos
:
A ordenação em ordem numérica, com algarismos romanos minúsculos, se desejada, precisa ser declarada.
<ol
type="i"
></ol>
Exemplo de lista ordenada com algarismos romanos minúsculos:
<ol
type="i"
>
<li>Laranja</li>
<li>Limão</li>
<li>Maracujá</li></ol>
Visualização no navegador
Laranja
Limão
Maracujá
Exemplo de lista ordenada com algarismos romanos minúsculos, com degrau:
<ol
type="i"
>
<li>Laranja
<ol>
<li>Pêra</li>
<li>Lima</li></ol></li>
<li>Limão</li>
<li>Maracujá</li></ol>
Visualização no navegador
Laranja
Pêra
Lima
Limão
Maracujá
Note que como no degrau dos tipos de laranja não foi declarado o tipo de lista, a lista assumiu o tipo padrão.
Ordenação em ordem numérica, com algarismos romanos maiúsculos
:
A ordenação em ordem numérica, com algarismos romanos maiúsculos, se desejada, precisa ser declarada.
<ol
type="I"
></ol>
Exemplo de lista ordenada com algarismos romanos maiúsculos:
<ol
type="I"
>
<li>Laranja</li>
<li>Limão</li>
<li>Maracujá</li></ol>
Visualização no navegador
Laranja
Limão
Maracujá
Exemplo de lista ordenada com algarismos romanos maiúsculos, com degrau:
<ol
type="I"
>
<li>Laranja
<ol
type="i"
>
<li>Pêra</li>
<li>Lima</li></ol></li>
<li>Limão</li>
<li>Maracujá</li></ol>
Visualização no navegador
Laranja
Pêra
Lima
Limão
Maracujá
Note que no degrau dos tipos de laranja foi declarado o tipo de lista com algarismos romanos minúsculos.
Com o uso de CSS, que será visto posteriormente, a ordenação de listas podem ser feitas com outras alternativas, inclusive com imagens.