Curso de HTML / Criar listas com ul, ol e dl e aninhá-las

Escolha ol quando a ordem dos itens importar, ul quando não importar, e dl para nomes associados a descrições ou valores. Esses elementos descrevem as relações entre os itens; sua numeração e marcadores padrão são apenas apresentação.

Quando você deve usar ol, ul ou dl?

Os itens de ol e ul usam li. Em um dl, dt fornece um nome e dd fornece sua descrição ou valor.

Experimente os três tipos de listas em um mesmo arquivo

Salve este código como um arquivo HTML e abra-o em um navegador para comparar as apresentações padrão das listas. O CSS solicita a fonte Noto Sans KR se estiver instalada; caso contrário, o navegador usa uma fonte sem serifa substituta.

<!doctype html>

<html lang="pt-BR">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Listas HTML</title>

    <style>

      body { font-family: "Noto Sans KR", sans-serif; }

    </style>

  </head>

  <body>

    <h1>Preparar uma viagem</h1>

    <h2>Suprimentos</h2>

    <ul>

      <li>Água</li>

      <li>Mapa</li>

    </ul>

    <h2>Etapas</h2>

    <ol>

      <li>Escolher as datas</li>

      <li>Preparar uma mochila</li>

    </ol>

    <h2>Termos</h2>

    <dl>

      <dt>Partida</dt>

      <dd>O dia em que a viagem começa</dd>

      <dt>Chegada</dt>

      <dd>O dia em que você chega ao destino</dd>

    </dl>

  </body>

</html>

O CSS pode alterar a indentação e os estilos dos marcadores. A distinção importante é a relação ordem ou nome–descrição expressa pelo HTML.

Alterar a numeração de uma lista ordenada

Um ol começa em 1 por padrão. Seu atributo start altera o primeiro número; value em um li específico altera o número desse item.

<ol start="5">

  <li>Quinta etapa</li>

  <li value="9">Nona etapa</li>

  <li>Décima etapa</li>

</ol>

Os marcadores são 5, 9 e 10. Use reversed quando a numeração deve decrescer.

<ol reversed>

  <li>Terceiro item</li>

  <li>Segundo item</li>

  <li>Primeiro item</li>

</ol>

Colocada sozinha, esta lista invertida sem valor inicial faz a contagem regressiva de seus três elementos como 3, 2, 1. Verifique se a numeração corresponde à sequência prevista.

Os atributos de numeração não transformam uma coleção não ordenada em uma sequência significativa. Escolha primeiro o tipo de lista pelo seu significado.

Associe os nomes e descrições com dl

Um dl não é limitado a definições de dicionário. Ele pode associar uma propriedade de produto ao seu valor ou uma data à sua descrição. Mantenha cada entrada dt e dd fácil de associar.

<dl>

  <dt>Horário de funcionamento</dt>

  <dd>Durante a semana, das 9h às 18h</dd>

  <dt>Fechado</dt>

  <dd>Sábado e domingo</dd>

</dl>

Estes são horários fictícios usados apenas para demonstrar a marcação.

Incorpore uma lista dentro de um item de lista

Uma sublista pertence dentro do li pai que ela expande. Aqui, as roupas são um subconjunto dos suprimentos de viagem. Veja Sintaxe HTML para a regra de fechar os elementos de dentro para fora.

<ul>

  <li>Água</li>

  <li>Roupas

    <ul>

      <li>Jaqueta</li>

      <li>Meias</li>

    </ul>

  </li>

</ul>

Você também pode aninhar um ul dentro de um ol. Neste exemplo, as etapas principais têm uma ordem significativa, mas os dois itens a colocar na mala não têm.

<ol>

  <li>Escolher as datas da viagem</li>

  <li>Preparar uma mochila

    <ul>

      <li>Roupas</li>

      <li>Itens de higiene pessoal</li>

    </ul>

  </li>

  <li>Ir viajar</li>

</ol>

Não coloque uma sublista diretamente abaixo de um ul ou ol externo; coloque-a dentro do li relevante. Evite também colocar uma lista inteira dentro de um p. Listas e parágrafos são estruturas separadas.

Lista de verificação para escrever listas

• Decida se a ordem dos itens altera o sentido antes de escolher ol ou ul.
• Use li para cada item de uma lista ordenada ou não ordenada.
• Esclareça a relação dt–dd em uma lista de descrição.
• Coloque uma sublista dentro de seu elemento pai li, e use CSS para a aparência do marcador.

Para mais exemplos, consulte o guia de MDN sobre listas HTML. Para usar uma lista em um conjunto real de páginas, comece com a estrutura de arquivos em Criar um pequeno site web com várias páginas.