Listas em HTML

Listas ajudam a organizar informações. HTML tem listas sem ordem e listas ordenadas.

Lista sem ordem

Use <ul> quando a ordem dos itens não é importante. Cada item fica dentro de <li>.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Lista ordenada

Use <ol> quando a ordem importa, como passos de uma receita ou instruções.

<ol>
  <li>Abrir o editor</li>
  <li>Escrever o HTML</li>
  <li>Executar o exemplo</li>
</ol>

Listas aninhadas

Você também pode colocar uma lista dentro de um item. Isso é útil para subitens.

<ul>
  <li>
    Front-end
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>JavaScript</li>
</ul>

Mini tarefa

Crie uma lista ordenada com três passos para estudar hoje.

Pequeno quiz

Pergunta: Qual tag representa um item de lista?

Resposta: <li>.

Pequeno desafio

Crie uma lista sem ordem com três ferramentas que um iniciante em programação pode usar.

<!-- coloque seu código abaixo -->

Resumo

• <ul> cria lista sem ordem.
• <ol> cria lista ordenada.
• <li> cria cada item.
• Listas deixam o conteúdo mais fácil de ler.