Para aninhar listas HTML corretamente, coloque cada sublista dentro do item de lista ao qual ela pertence, antes da tag de fechamento desse item. Este guia mostra como criar, salvar e visualizar um exemplo de três níveis usando o TextEdit e o Safari em um Mac.

Onde deve ficar uma lista HTML aninhada?

Uma lista HTML tem duas partes estruturais: um contêiner de lista e seus itens. Use <ul> para uma lista não ordenada e <ol> para uma lista ordenada. Cada item comum fica entre <li> e </li>. Uma lista aninhada deve ficar dentro de um desses itens. O guia de listas do Google demonstra exatamente esse padrão de aninhamento.

A sequência essencial é: abrir o item pai, escrever seu rótulo, inserir a sublista completa e, em seguida, fechar o item pai. Manter a tag de fechamento visível facilita verificar essa relação.

Este fragmento HTML correto dá dois itens filhos ao Grupo A, mantendo o Grupo B no nível externo:

<ul>
  <li>Group A
    <ul>
      <li>Item A1</li>
      <li>Item A2</li>
    </ul>
  </li>
  <li>Group B</li>
</ul>

Leia as tags de fechamento de dentro para fora. Primeiro, cada item filho é fechado. Em seguida, a lista interna é fechada com </ul>. Depois, o Grupo A é fechado com </li>. Só então o Grupo B começa. Isso oferece uma verificação prática: localize as tags de abertura e fechamento do pai e confirme que a sublista inteira está entre elas.

O Padrão HTML permite que elementos <li> contenham conteúdo de fluxo, que inclui listas. O modelo de conteúdo de <ul> e <ol> permite itens de lista e elementos de suporte a scripts; não permite outro contêiner de lista diretamente dentro do contêiner externo. Consulte as definições de conteúdo de agrupamento do Padrão HTML.

Escolha o tipo de lista separadamente em cada nível

Pergunte se mudar a ordem dos itens mudaria o significado deles. Se mudaria, escolha <ol>. Se os itens formam um conjunto cujo significado não depende da sequência, escolha <ul>. Aplique essa pergunta separadamente a cada sublista. A documentação sobre listas ordenadas da Mozilla explica tanto o critério da ordem quanto a combinação de tipos de lista.

No exemplo desenvolvido abaixo, o Grupo A e o Grupo B são categorias neutras, então a lista externa não é ordenada. O Item A1 e o Item A2 também formam um conjunto não ordenado. Sob o Item A2, abrir um documento de exemplo vem antes de renomeá-lo, então essas duas instruções usam uma lista ordenada.

Relação entre conteúdos Escolha de lista Posicionamento
Um conjunto de grupos <ul> Em torno dos itens dos grupos
Itens pertencentes ao Grupo A <ul> Dentro do <li> do Grupo A
Uma sequência pertencente ao Item A2 <ol> Dentro do <li> do Item A2
Itens pertencentes ao Grupo B <ul> Dentro do <li> separado do Grupo B

Mudar de marcadores para números não exige uma técnica de aninhamento diferente. O item pai continua envolvendo toda a lista filha. A documentação da Mozilla oferece suporte explícito ao aninhamento de listas ordenadas e não ordenadas em vários níveis. Notas de uso de listas ordenadas

Crie um documento completo com listas aninhadas no TextEdit

O exemplo a seguir é um documento HTML completo. Ele usa rótulos fictícios e não exige recursos baixados nem código adicional. Sua estrutura contém quatro listas e oito itens de lista: dois grupos externos, quatro itens distribuídos entre esses grupos e duas instruções sob o Item A2.

No TextEdit, escolha File > New e, em seguida, Format > Make Plain Text. Cole o exemplo completo abaixo. A Apple documenta esse fluxo de trabalho com texto sem formatação para criar arquivos HTML em seu guia de HTML do TextEdit.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample workspace outline</title>
</head>
<body>
  <h1>Sample workspace outline</h1>
  <ul>
    <li>Group A
      <ul>
        <li>Item A1</li>
        <li>Item A2
          <ol>
            <li>Open the sample document.</li>
            <li>Rename the sample document.</li>
          </ol>
        </li>
      </ul>
    </li>
    <li>Group B
      <ul>
        <li>Item B1</li>
        <li>Item B2</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Escolha File > Save, dê ao arquivo o nome nested-lists.html e salve-o em um local fácil de encontrar. Se o TextEdit perguntar qual extensão usar, escolha Use .html. Essas são as etapas documentadas pela Apple para salvar HTML. Copie apenas o código dentro do bloco delimitado; omita as linhas das cercas Markdown.

No Finder, selecione o arquivo salvo e escolha File > Open With > Safari. A Apple documenta como selecionar um aplicativo por meio de File > Open With em Escolher um app para abrir um arquivo no Mac.

Compare a visualização com estas relações esperadas:

  • O Grupo A e o Grupo B são irmãos no nível externo.
  • O Item A1 e o Item A2 pertencem ao Grupo A.
  • As duas instruções numeradas pertencem somente ao Item A2.
  • O Item B1 e o Item B2 pertencem ao Grupo B.

Confira essas relações tanto no código-fonte quanto na exibição. As tags explícitas do exemplo e as relações entre listas e seus pais foram verificadas por programação; a aparência no Safari não foi testada aqui.

Diagnostique uma sublista associada ao item errado

Use a sequência a seguir quando um documento existente tiver as palavras certas, mas a hierarquia estiver errada. Trabalhe em um pai e seus filhos imediatos por vez, começando pela lista externa.

1. Encontre um item pai que seja fechado cedo demais

Este fragmento incorreto fecha o Grupo A antes do início da sublista:

<ul>
  <li>Group A</li>
  <ul>
    <li>Item A1</li>
  </ul>
</ul>

Aqui, o <ul> interno é um filho direto do <ul> externo. Mova o </li> do Grupo A para baixo do </ul> interno, de modo que o pai envolva a sublista. Esse reparo segue a regra de posicionamento ilustrada no exemplo de lista aninhada do Google.

2. Verifique se a estrutura é válida, mas tem o pai errado

Uma lista pode seguir as regras de aninhamento e ainda assim descrever uma relação incorreta. Por exemplo, colocar as instruções numeradas dentro do Item A1 as associaria ao Item A1, mesmo que o rótulo pretendido fosse Item A2. A sintaxe correta, por si só, não estabelece o agrupamento pretendido.

Para cada sublista, pergunte: “A tag de abertura de qual item envolve a lista inteira?” Compare o rótulo desse item com o do pai pretendido. No exemplo completo, ao percorrer para fora a partir das instruções numeradas, você deve chegar ao Item A2 e, em seguida, ao Grupo A. Se chegar a outro rótulo, reposicione a sublista inteira antes de ajustar sua aparência.

3. Deixe explícitas as tags de fechamento durante a edição

O HTML permite omitir a tag de fechamento </li> de um item em condições específicas, inclusive quando outro item vem imediatamente depois. Você não precisa depender dessa abreviação. Ao aprender ou corrigir o aninhamento, escreva todas as tags de fechamento dos itens para que cada limite fique visível. A Mozilla lista as condições exatas para omissão em seu resumo técnico de itens de lista.

Use uma indentação consistente como auxílio de edição: indente uma lista filha sob o rótulo do pai e alinhe as tags de abertura e fechamento correspondentes da lista. Depois, confira os limites efetivos das tags. A indentação facilita a leitura da relação pretendida; os elementos que envolvem a lista é que a estabelecem.

4. Mantenha os elementos de parágrafo dentro de seus próprios limites

Se o rótulo de um pai precisar de um parágrafo, feche esse parágrafo antes de abrir a sublista, mantendo ambos dentro do item pai. O Padrão HTML determina que contêineres de lista não podem ser filhos de elementos <p>. Regras de conteúdo de parágrafo do HTML

Este fragmento válido mantém o parágrafo do rótulo e a lista filha juntos dentro do Grupo A:

<ul>
  <li>
    <p>Group A</p>
    <ul>
      <li>Item A1</li>
    </ul>
  </li>
</ul>

Reabra o código-fonte e preserve a hierarquia ao fazer alterações

Se reabrir o arquivo no TextEdit mostrar conteúdo formatado em vez das tags, escolha File > Open, selecione o arquivo, clique em Show Options, selecione Ignore rich text commands e clique em Open. Para arquivos futuros, a Apple também oferece TextEdit > Settings > Open and Save e a opção Display HTML files as HTML code instead of formatted text. Visualizar HTML como código no TextEdit

Ao mover um item, mova todo o bloco <li>, incluindo as sublistas que ele contém. Por exemplo, para mover o Item A2, leve com ele suas duas instruções. Mover apenas o rótulo deixaria essas instruções para trás e mudaria o agrupamento pretendido do documento.

Antes de salvar uma revisão, confira três coisas: cada lista filha está envolvida pelo item pai pretendido; os itens irmãos permanecem na ordem necessária; e cada lista usa marcadores ou numeração conforme a sequência seja importante ou não. Salve o arquivo, reabra-o no Safari e compare os grupos visíveis com o esquema pretendido. Manter cada pai junto de toda a sua subárvore facilita verificar edições futuras.

Fontes