Html ol

Html ol

Neste artigo HTML veremos como usar o elemento HTML chamado de tag <ol>

a Tag HTML <ol>, e sua implementação através dos exemplos. A tag <ol> é para uma lista ordenada, uma lista ordenada pode ser numérica ou alfabética. Dentro da tag <ol> você deve fazer uma lista <li> de itens que seguirão a ordem.

Veja o exemplo no código

<ol>
   <li>Html5</li>
   <li>CSS3</li>
   <li>jQuery</li>
   <li>javascript</li>
</ol>

Veja o Resultado!

1. Html5
2. CSS3
3. jQuery
4. javascript

Outro exemplo

Duas listas ordenadas diferentes (a primeira lista começa em 1 e a segunda começa em 10):

<ol>
  <li>Café</li>
  <li>Chá</li>
  <li>Suco</li>
</ol>

<ol start="10">
  <li>Café</li>
  <li>chá</li>
  <li>Suco</li>
</ol>

1. Café
2. Chá
3. Suco

10. Café
11. chá
12. Suco

Atributos

O atributo tipo HTML <ol> define qual tipo (1, A, a, I e i) de ordem você deseja em sua lista de números numéricos, alfabéticos ou romanos.

exemplo:

Observação: use um dos valores no type.

<ol type="1">
   <li>Frango assado</li>
   <li>Filé de Peixe</li>
   <li>Picanha na Brasa</li>
</ol>

<ol type="a">
   <li>Frango assado</li>
   <li>Filé de Peixe</li>
   <li>Picanha na Brasa</li>
</ol>

<ol type="A">
   <li>Frango assado</li>
   <li>Filé de Peixe</li>
   <li>Picanha na Brasa</li>
</ol>

<ol type="i">
   <li>Frango assado</li>
   <li>Filé de Peixe</li>
   <li>Picanha na Brasa</li>
</ol>

<ol type="I">
   <li>Frango assado</li>
   <li>Filé de Peixe</li>
   <li>Picanha na Brasa</li>
</ol>

Valores de atributo

• 1: Este é o valor padrão. Define os itens da lista em número decimal.(1, 2, 3, 4 .).
• a: Define os itens da lista em letras minúsculas ordenadas alfabeticamente .(a, b, c, d …)
• A: Define os itens da lista em letras maiúsculas ordenadas alfabeticamente. (A, B, C, D ..)
• i: Define os itens da lista em ordem de números romanos minúsculos.(i, ii, iii, iv, v, vi …)
• I: Define os itens da lista em ordem de números romanos maiúsculos.(I, II, III, IV, V, VI ..)

Número Decimal

1. HTML5
2. CSS3
3. jQuery
4. WordPress
5. Design Responsivo

Ordem alfabetica

1. HTML5
2. CSS3
3. jQuery
4. WordPress
5. Design Responsivo

Configurações padrão de CSS

A maioria dos navegadores exibirá o <ol>elemento com os seguintes valores padrão:

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

Neste artigo abordamos sobre a tag Html ol.

Veja outros artigos sobre Tags HTML Lista Completa