Capítulo 4: Listas Ordenadas e de Descrição

Listas Ordenadas e de Descrição

Diferentes tipos de listas: Além das listas não ordenadas, temos também listas ordenadas (quando a sequência importa) e listas de descrição (para termos e definições).

1. Listas Ordenadas - Tag <ol>

Na lista ordenada existe uma ordem de prioridade para os elementos ou uma sequência de ações que devem ser seguidas em ordem específica.

Exemplo: Receita de Bolo

Uma receita é uma lista ordenada porque uma coisa tem que acontecer antes da outra para dar certo:

Aquecer o forno e untar a forma
Misturar os ingredientes do bolo e bater
Colocar a mistura na forma e colocar no forno
Aguardar 25 minutos e estará pronto o bolo

OL = Ordered List: A lista ordenada começa com a tag <ol></ol> e cada item usa <li></li>, assim como nas listas não ordenadas.

<p>Receita do bolo</p>
<ol>
  <li>Aquecer o forno e untar a forma</li>
  <li>Misturar os ingredientes do bolo e bater</li>
  <li>Colocar a mistura na forma e colocar no forno</li>
  <li>Aguardar 25 minutos e estará pronto o bolo</li>
</ol>
            

2. Listas de Descrição - Tag <dl>

O elemento <dl> (description list) é usado para criar uma lista de descrição ou definição. É frequentemente utilizado para apresentar termos junto com suas descrições.

Estrutura da Lista de Descrição

<dl> - Description List (Lista de Descrição)

<dt> - Description Term (Termo a ser definido)

<dd> - Description Definition (Definição do termo)

<h2>Exemplo de uso do elemento dl</h2>
<dl>
  <dt>Café:</dt>
  <dd>Uma bebida feita a partir dos grãos torrados da planta do café.</dd>
  
  <dt>Chá:</dt>
  <dd>Uma bebida feita pela infusão de folhas, flores ou ervas em água quente.</dd>
</dl>
            

3. Comparação dos Tipos de Lista

Lista Não Ordenada (<ul>)

Quando usar: Itens sem ordem específica

Exemplo: Lista de compras, ingredientes

Aparência: Marcadores (•)

Lista Ordenada (<ol>)

Quando usar: Sequência de passos ou prioridades

Exemplo: Receitas, instruções

Aparência: Números (1, 2, 3...)

Lista de Descrição (<dl>)

Quando usar: Termos e definições

Exemplo: Glossários, dicionários

Aparência: Termo + definição

🎯 Prepare-se para os Exercícios!

Agora você vai praticar criando:

Exercício 1: Uma receita usando lista ordenada (<ol>)
Exercício 2: Um glossário usando lista de descrição (<dl>)
Exercício 3: Página completa combinando todos os tipos de lista

Prática: Criando Listas Ordenadas e de Descrição

Vamos praticar os diferentes tipos de listas! Observe como cada uma tem sua função específica na organização do conteúdo.

Aula Atual: Receita com Lista Ordenada
💡 Dica: Listas ordenadas são perfeitas para sequências que precisam ser seguidas!
⚠️ Importante: As tags html e body não podem ser usadas nos exercícios abaixo.