Listas

Listas organizam materiais da oficina, passos de impressão e cardápios de tipografia do Belavista. HTML oferece listas não ordenadas, ordenadas e de definição.

O exemplo deste capítulo é 09-listas, no pacote que acompanha o volume. Leia → mude uma coisa → preveja → recarregue → confira.

O que você vai aprender

• Montar ul/ol com li.
• Aninhar listas com cuidado.
• Usar dl/dt/dd para glossários.
• Não fingir lista com br e asteriscos no p.
• Entender que marcadores visuais vêm do CSS depois.

Não ordenada e ordenada

ul — itens sem ordem rígida (materiais).

ol — sequência (passos da serigrafia).

Cada item é um li. Feche a lista. Omitir </ul> faz o navegador “chutar” onde a lista termina — e pode engolir o próximo título.

<ul>
  <li>Papel 240 g</li>
  <li>Tinta vermelha</li>
  <li>Rodo</li>
</ul>

Aninhamento

Uma lista pode conter outra:

<ol>
  <li>Preparar tela
    <ul>
      <li>Esticar tecido</li>
      <li>Aplicar emulsão</li>
    </ul>
  </li>
  <li>Imprimir</li>
</ol>

O ul interno fica dentro do li, não solto entre itens.

Lista de definição

dl agrupa termos (dt) e descrições (dd). Bom para glossário tipográfico:

<dl>
  <dt>Serifa</dt>
  <dd>Traço terminal em letras de alguns tipos.</dd>
  <dt>Corpo</dt>
  <dd>Tamanho do tipo, em pontos.</dd>
</dl>

Listas e navegação

Menus de navegação costumam ser ul dentro de nav. Isso virá com mais força no capítulo 10. Já aqui, use lista de verdade — não parágrafos com hífen.

Erro comum: escrever “1. 2. 3.” como texto puro dentro de um p. Perde semântica, dificulta estilo e acessibilidade. Outro erro: colocar div no lugar de li.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Listas — Belavista</title>
  </head>
  <body>
    <main>
      <h1>Materiais e passos</h1>
      <h2>Materiais</h2>
      <ul>
        <li>Tipos móveis</li>
        <li>Tinta</li>
        <li>Papel</li>
      </ul>
      <h2>Passos da impressão</h2>
      <ol>
        <li>Compor o texto</li>
        <li>Travar a forma</li>
        <li>Entintar e imprimir</li>
      </ol>
      <h2>Glossário rápido</h2>
      <dl>
        <dt>Cartaz</dt>
        <dd>Impresso de grande formato para comunicação visual.</dd>
        <dt>Prova</dt>
        <dd>Impressão de teste antes da tiragem.</dd>
      </dl>
    </main>
  </body>
</html>

Troque a ul de materiais por ol e preveja: a ordem passa a ser afirmada pelo HTML.

Atributos úteis

Em ol, start e reversed alteram a numeração. Use com parcimônia. Estilo de marcador (disco, número romano) é tema de CSS na faixa seguinte do WebDev Full.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Quando escolher ol em vez de ul?
2. Onde deve ficar uma lista aninhada em relação ao li pai?
3. Para que serve dl no glossário do Belavista?

Respostas comentadas

1. Quando a ordem dos itens faz parte do significado (passos, ranking, sequência).
2. Dentro do li pai, como conteúdo desse item — não entre li soltos.
3. Associar termos tipográficos (dt) às suas explicações (dd) de forma estruturada.