Listas Ordenadas, Não Ordenadas e de Definição

A informação desestruturada é o caos da web

Uma lista não é apenas uma forma visual de mostrar itens. Ela comunica ao navegador que existe um conjunto de informações relacionadas, com ordem, agrupamento ou definição.

Informação solta vs informação estruturada

ul e li

A tag <ul> agrupa itens que não dependem de sequência. A tag <li> representa cada item da lista e nunca deve existir órfã.

ul usada corretamente

<h3>Recursos do HTML5 Mestre</h3>
<ul>
  <li>Semântica avançada</li>
  <li>Foco em acessibilidade</li>
  <li>Otimização para SEO</li>
</ul>

Lista de navegação com ul dentro de nav

<nav>
  <ul>
    <li><a href="home.html">Início</a></li>
    <li><a href="aulas.html">Aulas</a></li>
    <li><a href="contato.html">Contato</a></li>
  </ul>
</nav>

ol

A tag <ol> define uma lista onde a ordem altera o significado: tutoriais, ranking, instalação, receita, fluxo de estudo ou sequência técnica.

ol usada corretamente

<h3>Como iniciar um projeto de elite</h3>
<ol>
  <li>Defina o DOCTYPE html.</li>
  <li>Configure o head com metadados.</li>
  <li>Arquitetar o body com tags semânticas.</li>
</ol>

Erro: parágrafos fingindo lista

<p>• Item 1</p>
<p>• Item 2</p>
<p>• Item 3</p>

dl, dt e dd

A tag <dl> cria uma lista de descrição. Ela liga termos e definições: glossários, FAQs, metadados de produto, vocabulários técnicos e pares nome/valor.

HTML5

Linguagem de marcação para estruturar conteúdo na web.

CSS3

Linguagem de estilo usada para definir a aparência visual.

JavaScript

Linguagem de programação que adiciona interatividade.

Exemplo em código

<dl>
  <dt>HTML5</dt>
  <dd>Linguagem de marcação para estruturar conteúdo na web.</dd>

  <dt>CSS3</dt>
  <dd>Linguagem de estilo usada para definir a aparência visual.</dd>
</dl>

Listas aninhadas

Listas aninhadas são listas dentro de listas. A lista filha deve ficar dentro de um li da lista pai.

<ul>
  <li>Unidade 01: Fundamentos
    <ul>
      <li>Aula 01 — O que é HTML</li>
      <li>Aula 02 — História do HTML</li>
    </ul>
  </li>
  <li>Unidade 02: Estrutura Base
    <ul>
      <li>Aula 05 — Doctype</li>
      <li>Aula 06 — Tags Base</li>
    </ul>
  </li>
</ul>

Como escolher entre ul, ol e dl

• Não use br para simular lista.
• Não coloque li fora de ul ou ol.
• Não use ul quando a ordem importa.
• Não use ol quando a ordem não importa.
• Não crie listas gigantes sem agrupamento.
• Não use dl para qualquer coisa.

Arquitetura de listas no navegador

1. Crie uma dl com um dt e dois dd.
2. Abra no navegador e use Inspecionar.
3. Veja o recuo automático das descrições.
4. Crie uma ol com três etapas técnicas.
5. Dentro do primeiro li, aninhe uma ul.
6. Observe a hierarquia pai e filho na árvore DOM.

Exercício guiado

Crie um passo a passo com ol e aninhe uma ul dentro do primeiro item.

Exercício independente

Crie um glossário técnico com dl, pelo menos três termos em dt e descrições claras em dd.

Erros comuns e correções

Você domina listas semânticas?

• Sei decidir entre ul e ol pela lógica dos dados.
• Sei usar dl, dt e dd para glossários.
• Todo li que escrevo está dentro de ul ou ol.
• Consigo aninhar listas sem quebrar a indentação.
• Entendo como listas ajudam leitores de tela e buscadores.

15 perguntas para provar domínio

1. Qual contêiner para lista onde a ordem importa? ol.
2. Qual tag representa cada item de ul ou ol? li.
3. Qual lista usar para receita passo a passo? ol.
4. O que significa dl? Description List.
5. Função de dt? Definir o termo.
6. Função de dd? Fornecer descrição/detalhe.
7. Pode haver mais de um dd para um dt? Sim.
8. Onde colocar uma lista aninhada? Dentro de um li da lista pai.
9. Por que não usar hifens manuais? Não têm semântica.
10. Como listas ajudam SEO? Facilitam featured snippets e leitura estrutural.
11. Vantagem para leitores de tela? Anunciam quantidade de itens.
12. Div pode ser filho direto de ul? Não como item principal; use li.
13. Qual lista usar em menu? Geralmente ul dentro de nav.
14. dl pode ser usada em FAQ? Sim.
15. Remover bolinhas com CSS anula semântica? Não.

Acessibilidade, SEO, mercado e manutenção

Aplicação em projeto real

Listas sustentam menus de navegação, mapas do site, rodapés complexos, sumários, glossários, documentações e roteiros de estudo.

Acessibilidade

Leitores de tela anunciam listas e quantidade de itens, permitindo que o usuário entenda onde o grupo começa, termina e quantos itens contém.

SEO

O Google entende melhor listas bem marcadas, principalmente em conteúdos de “como fazer”, rankings, perguntas frequentes e guias técnicos.

Mercado

Componentes repetitivos como menus, cards e itens de rodapé costumam ser listas, facilitando CSS, JavaScript e manutenção.

Registre seu guia com listas semânticas

git status
git add .
git commit -m "aula-10: cria guia com listas semanticas"
git push

• git status: verifica os arquivos criados.
• git add .: prepara o código para commit.
• git commit: salva a versão oficial da sua estrutura de dados.
• git push: envia sua evolução para o GitHub.

Evidência para portfólio

• Arquivo guia-listas-semanticas.html.
• Print do código com ul, ol, dl e lista aninhada.
• Print da página renderizada.
• Commit no GitHub.
• Explicação curta sobre quando usar cada tipo de lista.