Documentos Técnicos

A lista com marcadores

ul

A tag <ul>, associada à tag <li>, cria uma lista de itens com marcadores, ou lista não ordenada (unordered list). A tag <ul> define que a lista será com marcadores e a tag <li> contém cada um dos itens da lista.

A tag <ul> está disponível desde a primeira versão da HTML1.

Exemplo de uso:

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

<ul>
<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>
</ul>

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

Uma lista pode ser aninhada dentro de outra formando uma sublista:

      
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit;
    •   
  • Etiam suscipit eros in laoreet laoreet. Phasellus lacinia nisi in auctor suscipit;
    •   
  • 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.
      •     
      
    •   
  • Suspendisse hendrerit sodales ante ac sodales.

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



(1) http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html