Listas em HTML

Bem-vindo a mais um passo empolgante na sua jornada de desenvolvimento web! Seja olhando os ingredientes de uma receita, uma lista de compras ou um ranking de filmes favoritos, as listas estão por toda parte na internet. Elas ajudam a manter as informações visualmente organizadas e fáceis de ler. Vamos explorar como construir essas estruturas essenciais usando HTML!

O bloco de construção central: o item de lista (<li>)

Pense em uma lista como um grande contêiner, e nos itens dentro dela como o conteúdo de fato. Antes de decidir que tipo de contêiner usar, precisamos saber como envolver cada conteúdo individual. Em HTML, todo item da sua lista precisa estar envolvido em uma tag <li>.

As letras li simplesmente significam "list item" (item de lista). Quer a sua lista final use marcadores (bullets) ou números, cada pedaço de texto individual dentro dela precisa morar dentro de uma tag <li>. É a maneira universal de dizer ao navegador: "Ei, isto é um item específico da minha lista."

Listas não ordenadas (<ul>)

Às vezes, a sequência exata dos seus itens simplesmente não importa. Pense em uma lista de compras comum: não faz diferença se você pega o leite antes das maçãs, ou as maçãs antes do leite.

Para essas situações flexíveis, usamos uma Lista Não Ordenada, que você cria usando a tag <ul>. Quando você envolve seus itens de lista em uma tag <ul>, o navegador automaticamente coloca pequenos marcadores (pequenos círculos pretos) ao lado de cada item.

<ul>
  <li>Maçãs</li>
  <li>Leite</li>
  <li>Pão</li>
</ul>

Listas ordenadas (<ol>)

Outras vezes, a sequência dos seus itens é incrivelmente importante. Se você está escrevendo instruções passo a passo para fazer um bolo, ou contando os seus 10 programas de TV favoritos, a ordem é absolutamente fundamental.

Para isso, usamos uma Lista Ordenada, que você cria com a tag <ol>. Em vez de usar marcadores, o navegador automaticamente numera esses itens para você em uma sequência rígida.

<ol>
  <li>Pré-aqueça o forno.</li>
  <li>Misture os ingredientes.</li>
  <li>Asse por 30 minutos.</li>
</ol>

Aninhando listas (a regra de ouro)

À medida que você constrói sites mais complexos, eventualmente vai querer colocar uma lista dentro de outra lista. Por exemplo, você pode ter um menu de navegação principal com um submenu, ou uma lista de tarefas em que uma grande tarefa contém subtarefas menores.

Aqui está a regra de ouro absoluta de aninhar listas — e a maneira mais fácil de evitar um erro muito comum de iniciantes:

Se você quer colocar uma lista dentro de outra lista, a lista interna (sua nova <ul> ou <ol>) PRECISA ficar completamente dentro de uma tag <li> existente.

Uma lista interna não pode flutuar livremente sozinha dentro do contêiner principal <ul> ou <ol>. Ela precisa morar protegida dentro de um item de lista específico.

<ul>
  <li>Limpar a cozinha</li>
  <li>Comprar mantimentos
    <ul>
      <li>Ovos</li>
      <li>Queijo</li>
    </ul>
  </li>
  <li>Passear com o cachorro</li>
</ul>

Repare como a <ul> interna de mantimentos está completamente contida antes da tag de fechamento </li> do item "Comprar mantimentos"? Esse é o segredo para uma formatação perfeita!

Resumo

Agora você está pronto para organizar a web! Vamos reforçar rapidamente os principais aprendizados:

• A tag <li>: Envolve cada item da sua lista, não importa o quê.
• A tag <ul>: Usada para Listas Não Ordenadas, em que a ordem não importa, criando marcadores automáticos.
• A tag <ol>: Usada para Listas Ordenadas, em que a sequência importa, criando números automáticos.
• Aninhamento: Sempre coloque as listas internas aninhadas diretamente dentro de uma tag <li> existente.