HTML – 23/03/2026

Por /

Em HTML, listas são usadas para organizar conteúdos de forma estruturada. Existem três tipos principais: listas ordenadas, listas não ordenadas e listas de definição. Vamos entender cada uma

🔢 Lista Ordenada (<ol>)

É usada quando a ordem dos itens importa (ex: passo a passo, ranking, instruções).

📌 Características:

  • Os itens aparecem numerados automaticamente (1, 2, 3…)
  • Cada item é definido com a tag <li>

💻 Exemplo:

<ol>
  <li>Fazer login</li>
  <li>Escolher produto</li>
  <li>Finalizar compra</li>
</ol>

🧾 Resultado:

  1. Fazer login
  2. Escolher produto
  3. Finalizar compra

🔸 Lista Não Ordenada (<ul>)

É usada quando a ordem não importa (ex: lista de itens, características).

📌 Características:

  • Os itens aparecem com marcadores (bolinhas, quadrados, etc.)
  • Também usa <li> para cada item

💻 Exemplo:

<ul>
  <li>Arroz</li>
  <li>Feijão</li>
  <li>Macarrão</li>
</ul>

🧾 Resultado:

  • Arroz
  • Feijão
  • Macarrão

📘 Lista de Definição (<dl>)

É usada para definir termos e suas descrições (tipo um glossário).

📌 Características:

  • <dl>: define a lista
  • <dt>: termo (definition term)
  • <dd>: descrição do termo (definition description)

💻 Exemplo:

<dl>
  <dt>HTML</dt>
  <dd>Linguagem...</dd>  <dt>CSS</dt>
  <dd>Usado para...</dd>
</dl>

🧾 Resultado:

HTML
→ Linguagem…

CSS
→ Usado para…

🧠 Resumo

Tipo de ListaTag PrincipalQuando usar
Ordenada<ol>Quando a ordem é importante
Não ordenada<ul>Quando a ordem não importa
Definição<dl>Para termos e descrições

ATIVIDADE DE LABORATÓRIO

Abra o Visual Studio Code (VS Code), crie um arquivo chamado listas.html e resolva as questões abaixo utilizando a linguagem HTML:

  1. Crie uma lista ordenada com o título “Passos para fazer uma tapioca”, contendo pelo menos 4 passos.
  2. Crie uma lista não ordenada com o título “Comportamentos que geram ocorrência”, contendo pelo menos 5 comportamentos que um estudante deve evitar na escola.
  3. Crie uma lista de definição com o título “Termos de Tecnologia”, contendo 3 termos e suas respectivas descrições: HTML, CSS e JavaScript (Você possui as definições no próprio caderno).

Rolar para cima