Listas

docs.scrimba.com

Uma quantidade surpreendente de uma página web é realmente uma lista: menus de navegação, resultados de busca, grades de produtos, ingredientes de uma receita, as etapas para redefinir uma senha. Sempre que o conteúdo é um conjunto de itens relacionados, HTML tem um elemento que diz isso, e usar significa que o navegador, e qualquer pessoa lendo com software assistivo, sabe que os itens pertencem juntos.

Listas não ordenadas

Quando a ordem dos itens não importa, você usa uma lista não ordenada. Pense em uma lista de compras: leite, pão, ovos. Não importa qual você escreva primeiro, são um monte de coisas agrupadas.

Você constrói uma com duas tags. A tag <ul> envolve a lista inteira, e cada item fica dentro de sua própria tag <li> ("list item" ou item de lista):

<ul>
  <li>Leite</li>
  <li>Pão</li>
  <li>Ovos</li>
</ul>

O navegador mostra cada item em sua própria linha com um marcador na frente. Você não adicionou os marcadores ou as quebras de linha por conta própria, o navegador faz isso porque você disse que isso é uma lista.

Uma lista não ordenada é um grupo de itens onde a sequência não tem significado. O elemento <ul> é o container, e todo filho direto é um elemento <li> contendo um item:

<ul>
  <li>Frete grátis acima de R$200</li>
  <li>Devoluções em até 30 dias</li>
  <li>Garantia de dois anos</li>
</ul>

Uma regra a manter clara: a única coisa permitida como filho direto de <ul> é <li>. Você não coloca um <p> ou um <div> diretamente dentro do <ul>. Se você quer um parágrafo ou um link em um item, fica dentro do <li>, que pode conter qualquer conteúdo que você quiser.

Os marcadores e o recuo são estilos padrão do navegador, não parte do significado. Quando você chegar em CSS poderá mudá-los ou removê-los livremente, e a lista continua sendo uma lista por baixo.

Uma lista não ordenada marca um conjunto de itens cuja sequência não é significativa. <ul> é o container e cada item é um <li>; os únicos filhos diretos permitidos de <ul> são elementos <li> (e elementos de suporte de script como <template>), portanto colocar uma <div> simples entre <ul> e seus itens é inválido e o parser não a tratará como parte da lista.

<ul>
  <li>Frete grátis acima de R$200</li>
  <li>Devoluções em até 30 dias</li>
  <li>Garantia de dois anos</li>
</ul>

O marcador de marcação e o recuo são padrões presentacionais da folha de estilo integrada do navegador, não semântica; list-style: none os remove sem alterar o que o elemento significa. Essa divisão importa porque o significado vive no elemento, o marcador é apenas pintura. Software assistivo (o termo guarda-chuva para ferramentas como leitores de tela, que leem a página em voz alta para pessoas que não conseguem vê-la) lê a estrutura, não o marcador: anuncia que uma lista está começando e quantos itens ela tem. Voltamos ao que esse anúncio oferece para você no Deep Dive sobre aninhamento.

JunoListas não ordenadas Use <ul> para uma lista onde a ordem não importa, e envolva cada item em seu próprio <li>. O navegador adiciona os marcadores e as quebras de linha para você, então você nunca digita isso manualmente. Demorei um tempo para confiar nisso, eu continuava querendo adicionar os pontos eu mesmo.

JunoListas não ordenadas<ul> é o container, e seus únicos filhos diretos são itens <li>. Qualquer coisa mais rica, um link, um parágrafo, fica dentro do <li>, nunca solto no <ul>. Os marcadores são estilos padrão que você pode mudar depois, então escolha o elemento pelo seu significado, não pela sua aparência.

JunoListas não ordenadas<ul> recebe apenas <li> como filho direto, então uma <div> errada ali é marcação inválida. O marcador vem da folha de estilo do navegador, não da semântica, então list-style: none remove o ponto e mantém a lista. Essa distinção é toda a razão pela qual um leitor de tela ainda pode contar os itens depois que seu CSS esconde os marcadores.

Listas ordenadas e seus atributos

Às vezes a ordem é o ponto todo. Etapas em uma receita, posições em uma corrida, instruções que você segue uma após a outra. Para isso você usa uma lista ordenada, que numera os itens para você.

Funciona exatamente como uma lista não ordenada, mas o container é <ol> em vez de <ul>:

<ol>
  <li>Preaqueça o forno a 180°C</li>
  <li>Misture a farinha e o açúcar</li>
  <li>Despeje na forma e asse por 25 minutos</li>
</ol>

Agora o navegador coloca 1, 2, 3 na frente dos itens em vez de marcadores. Se você adicionar uma nova etapa no meio depois, os números se renumeram sozinhos. Você nunca digita os números, e esse é o ponto de usar <ol>.

Uma lista ordenada é para itens cuja sequência tem significado. Mesma estrutura que <ul>, troque o container para <ol>, e o navegador numera cada <li> automaticamente. Como os números são gerados, inserir ou remover um item renumera o resto gratuitamente.

<ol> tem três atributos que valem a pena conhecer. start define o número pelo qual a lista começa:

<ol start="4">
  <li>Bata os ovos</li>
  <li>Incorpore a farinha</li>
</ol>

Essa lista funciona 4, 5. É útil quando uma lista continua depois que outro conteúdo a dividiu em duas.

type muda o estilo de numeração: 1 para números (o padrão), A ou a para letras, I ou i para algarismos romanos.

<ol type="a">
  <li>Reúna suas evidências</li>
  <li>Escreva o resumo</li>
</ol>

Essa lista funciona a, b em vez de 1, 2. E reversed conta para trás, o que combina com uma contagem regressiva ou um ranking dos cinco melhores lido de baixo para cima:

<ol reversed>
  <li>Bronze</li>
  <li>Prata</li>
  <li>Ouro</li>
</ol>

Uma lista ordenada marca itens cuja sequência é significativa; <ol> numera cada <li> a partir de valores gerados, então os ordinais nunca são conteúdo que você digita e permanecem corretos conforme os itens se movem.

Três atributos controlam a numeração. start define o primeiro ordinal como um inteiro independentemente do estilo de exibição, então start="4" em uma lista com algarismos romanos começa em iv. type define o estilo do marcador: 1, A, a, I, ou i. reversed (um atributo booleano, significando que sua presença sozinha é o valor, sem nada para definir) conta para trás do número de itens para 1.

<ol type="I" start="4" reversed>
  <li>Fundações</li>
  <li>Lançamento</li>
  <li>Revisão</li>
</ol>

Há uma distinção que o estilo pode esconder. type muda apenas como o marcador é desenhado; o valor anunciado para software assistivo e usado por start é sempre o inteiro subjacente. Então uma lista estilizada com letras ainda é posições 1, 2, 3 por baixo. Quando o ordinal é parte do conteúdo em si, uma cláusula legal numerada para citação, prefira deixar <ol> ser o proprietário do número em vez de codificá-lo no texto, porque um "3." codificado em um <li> não se renumerará e um leitor de tela o lerá duas vezes: uma vez como o marcador gerado e uma vez como o texto. Um mais controle que vale a pena conhecer: o atributo value em um <li> individual substitui o número desse item e a lista continua contando a partir daí.

JunoListas ordenadas e seus atributos Recorra a <ol> quando a ordem importa, como etapas em uma receita, e o navegador numera os itens para você. Adicione ou remova uma etapa e os números se corrigem sozinhos, então você nunca digita 1. ou 2. manualmente. Mesmos itens <li> de antes, apenas um container diferente.

JunoListas ordenadas e seus atributos<ol> oferece três atributos úteis: start para começar a partir de um número diferente de 1, type para letras ou algarismos romanos em vez de dígitos, e reversed para contar para trás. Todos eles ainda deixam o navegador gerar os números, que é a razão pela qual você usa uma lista ordenada em primeiro lugar.

JunoListas ordenadas e seus atributostype apenas redecora o marcador; o valor por trás dele, o que start usa e a tecnologia assistiva lê, é sempre o inteiro. Então não digite manualmente "3." em um <li>, ou não se renumerará e um leitor de tela diz o número duas vezes. Deixe <ol> ser o proprietário da contagem, e use value em um único <li> quando você precisa ajustar um item.

Listas de descrição

Há um terceiro tipo de lista para quando cada item é realmente um par: uma palavra e seu significado, um rótulo e seu valor. Um glossário é o exemplo mais claro, cada termo seguido pelo que significa.

Esta é uma lista de descrição, e usa três tags. <dl> envolve a coisa toda, <dt> contém cada termo, e <dd> contém a descrição que acompanha:

<dl>
  <dt>HTML</dt>
  <dd>A linguagem que descreve a estrutura de uma página.</dd>
  <dt>CSS</dt>
  <dd>A linguagem que descreve como a página se parece.</dd>
</dl>

O navegador mostra cada descrição recuada sob seu termo, então o emparelhamento é claro à primeira vista. Pense em "dt" como a palavra que você está definindo e "dd" como a definição.

Quando cada item é um emparelhamento em vez de uma coisa isolada, uma lista de descrição se encaixa melhor do que <ul> ou <ol>. É construída a partir de três elementos: <dl> é o container, <dt> é um termo, e <dd> é a descrição vinculada a ele.

<dl>
  <dt>Autor</dt>
  <dd>João Silva</dd>
  <dt>Publicado</dt>
  <dd>14 de março de 2024</dd>
  <dt>Tempo de leitura</dt>
  <dd>6 minutos</dd>
</dl>

Esse exemplo mostra o segundo grande uso além de glossários: metadados de chave/valor, um conjunto de rótulos e seus valores. O agrupamento é flexível. Um <dt> pode ser seguido por vários elementos <dd> quando um termo tem mais de uma descrição, e vários elementos <dt> podem compartilhar um único <dd> quando vários termos significam a mesma coisa. Recorra a um <dl> sempre que seu conteúdo seja naturalmente "isto, e seu detalhe", e recorra a <ul> ou <ol> quando os itens se mantêm por conta própria.

Uma lista de descrição associa nomes com valores. <dl> é o container; <dt> é um termo (o nome); <dd> é uma descrição (o valor). A estrutura que o navegador e o software assistivo entendem é uma sequência de grupos, onde um grupo é um ou mais elementos <dt> seguidos por um ou mais elementos <dd>.

<dl>
  <dt>Armazenamento</dt>
  <dt>Capacidade</dt>
  <dd>256 GB SSD</dd>

  <dt>Cor</dt>
  <dd>Grafite</dd>
  <dd>Prateado</dd>
</dl>

Essa flexibilidade é o ponto: muitos termos podem compartilhar uma descrição, e um termo pode ter muitas descrições. Dois encaixes práticos se destacam. O primeiro é conteúdo de termo e definição, como um glossário. O segundo é metadados de chave/valor, uma tabela de especificação ou um conjunto de detalhes de postagem, onde cada rótulo se emparelha com seu valor; um <dl> diz "estes são pares nome/valor" de uma forma que uma pilha de <div>s nunca faz. Note a peculiaridade de nomenclatura: <dt> e <dd> historicamente significavam "definition term" e "definition description", mas a especificação moderna propositalmente os ampliou para qualquer associação nome/valor, não apenas definições de dicionário. Se seu conteúdo é uma lista plana de pares sem emparelhamento, um <dl> é a ferramenta errada e <ul> é a honesta.

JunoListas de descrição Uma lista de descrição é para pares: um termo e seu significado. Use <dl> ao redor de tudo, <dt> para cada termo, e <dd> para a descrição que o segue. Um glossário é a imagem que você deve manter em sua cabeça, termo então definição, termo então definição.

JunoListas de descrição Recorra a <dl> quando cada item é um emparelhamento, um termo e seu detalhe ou um rótulo e seu valor, não um conjunto de pares. O agrupamento se ajusta para se encaixar: um <dt> pode levar vários <dd>s, e vários <dt>s podem compartilhar um <dd>. Metadados de chave/valor como autor e data é onde ele ganha seu lugar além de glossários.

JunoListas de descrição<dl> significa pares nome/valor, e a especificação ampliou <dt> e <dd> além de definições de dicionário para qualquer rótulo-e-valor, portanto metadados são válidos. Muitos termos podem compartilhar um valor e um termo pode conter muitos valores, o que uma parede de <div>s nunca consegue expressar. Se os itens são pares sem nada para emparelhar, isso é uma <ul>, não uma <dl>.

Aninhamento de listas

Listas podem ir dentro de outras listas. Um menu pode ter "Bebidas" com opções quentes e frias em baixo, e cada uma com suas próprias escolhas. Colocar uma lista dentro de outra é chamado aninhamento.

A coisa chave a acertar: a lista interna fica dentro de um <li>, não flutuando entre itens. Você coloca todo o <ul> (ou <ol>) dentro do item de lista ao qual pertence:

<ul>
  <li>Bebidas
    <ul>
      <li>Café</li>
      <li>Chá</li>
    </ul>
  </li>
  <li>Lanches</li>
</ul>

"Café" e "Chá" são parte de "Bebidas", então sua pequena lista fica dentro do item "Bebidas". O navegador recua a lista interna um pouco mais, então você pode ver que pertence ao item acima.

Para mostrar que alguns itens pertencem sob outro item, você aninha uma lista dentro de uma lista. A regra que mantém isso válido: uma lista aninhada é filha de um <li>, nunca filha direta do <ul> ou <ol> externo. A lista interna fica dentro do item que ela expande.

<ul>
  <li>Frutas
    <ul>
      <li>Maçãs</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetais
    <ul>
      <li>Cenoura</li>
      <li>Espinafre</li>
    </ul>
  </li>
</ul>

Você pode misturar tipos conforme aninha, um <ol> dentro de um <ul> ou vice-versa, e aninha tão profundo quanto o conteúdo honestamente vai. O lugar mais comum onde você encontra listas aninhadas em código real é um menu de navegação com submenus: uma lista de nível superior de seções, cada uma com sua própria lista de páginas dentro de seu <li>.

Aninhamento é como a hierarquia é expressa: uma sublista é colocada dentro do <li> ao qual pertence, nunca como filho direto do <ul> ou <ol> pai. Acertar errado (um <ul> sentado diretamente dentro de outro <ul>) é inválido, e a recuperação do parser não é garantida corresponder ao que você imaginou.

Aninhamento também é onde a estrutura se beneficia para pessoas que não conseguem ver o recuo. Um leitor de tela anuncia uma lista, seu número de itens e sua profundidade de aninhamento conforme entra em cada nível: "lista, três itens", então em uma sublista "lista, dois itens", e diz ao usuário quando eles saem novamente. Esse comentário contínuo é o equivalente não-visual do recuo que seu olho lê gratuitamente, e só existe se o aninhamento é marcação real em vez de itens empurrados com espaçamento.

Isso leva ao teste de honestidade para qualquer lista. Um menu de navegação (o conjunto de links que move um visitante entre páginas, a linha ao longo do topo da maioria dos sites) é uma lista de destinos, então a marcação semanticamente correta é um <ul> de links, geralmente dentro de um elemento <nav> que rotula a região como navegação. Use uma lista real quando o conteúdo é um conjunto de itens relacionados, seja qual for o CSS que depois o faça parecer. Não use um quando não for: fingir lacunas entre blocos não relacionados envolvendo-os em <li>s para emprestar espaçamento de lista diz ao software assistivo "essas três coisas são um grupo de três" quando não são. O marcador pode ser escondido e o layout pode ser qualquer coisa; a escolha de <ul>, <ol>, ou <dl> deve sempre responder o que o conteúdo honestamente é.

JunoAninhamento de listas Para colocar uma lista dentro de uma lista, coloque a interna dentro do <li> ao qual pertence, não solto entre itens. O navegador a recua para que você possa ver que é parte do item acima. Essa regra dentro-do-<li> é a única coisa a lembrar aqui.

JunoAninhamento de listas Uma lista aninhada é sempre filha de um <li>, nunca filha direta do <ul> ou <ol> externo. Você pode misturar um <ol> dentro de um <ul> e ir tão profundo quanto o conteúdo realmente é. Menus de navegação com submenus são onde você vai encontrar isso mais, então vale a pena se acostumar agora.

JunoAninhamento de listas Coloque a sublista dentro de seu <li>, porque um leitor de tela lê o número de itens e a profundidade de aninhamento, e essa estrutura falada é o que substitui o recuo para alguém que não consegue vê-lo. Um menu nav realmente é uma lista de links, então marque como tal; não envolva blocos não relacionados em <li>s para emprestar espaçamento. Deixe o elemento dizer o que o conteúdo honestamente é, e estilize como quiser depois.