Documentos Técnicos

A lista numerada

ol

A tag <ol>, associada à tag <li>, cria uma lista de itens numerados, ou lista ordenada (ordered list). A tag <ol> define que a lista será indicada por números e a tag <li> contém cada um dos itens da lista.


Exemplo de uso:

O código abaixo exibe uma lista numerada contendo 3 itens:

<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit;</li>
<li>Etiam suscipit eros in laoreet laoreet. Phasellus lacinia nisi in auctor suscipit;</li>
<li>Integer blandit, orci a lacinia viverra.</li>
</ol>

O resultado do código HTML acima é este:
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit;
  2. Etiam suscipit eros in laoreet laoreet. Phasellus lacinia nisi in auctor suscipit;
  3. Integer blandit, orci a lacinia viverra.

Uma lista pode ser aninhada dentro de outra formando uma sublista, podendo mesclar listas numeradas e listas com marcadores. Use o quadro interativo abaixo para editar e experimentar com esta tag:

      
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit;
    2.   
  2. Etiam suscipit eros in laoreet laoreet. Phasellus lacinia nisi in auctor suscipit;
    3.   
  3. Integer blandit, orci a lacinia viverra:    
            
    • Vivamus dignissim purus eu tellus adipiscing pretium;
      •       
    • Curabitur sed enim lobortis enim malesuada porta;
      •        
    • Sed aliquet mauris lectus, quis viverra velit tristique et.
      •     
      
    4.   
  4. Suspendisse hendrerit sodales ante ac sodales.

See the Pen GHqpn by Opera House (@operahouse) on CodePen.