Listas

docs.scrimba.com

Boa parte de uma página web é, na verdade, uma lista: menus de navegação, resultados de busca, grades de produtos, os ingredientes de uma receita, os passos para redefinir uma senha. Sempre que o conteúdo é um conjunto de itens relacionados, o HTML tem um elemento que expressa isso, e usá-lo garante que o navegador, e qualquer pessoa lendo a página com um software de acessibilidade, saiba que aqueles 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ê escreve primeiro, eles são apenas um conjunto de coisas agrupadas.

Você monta uma com duas tags. A tag <ul> envolve a lista inteira, e cada item vai dentro da 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 nem as quebras de linha, o navegador faz isso porque você disse a ele que aquilo é uma lista.

Uma lista não ordenada é um grupo de itens em que a sequência não carrega significado nenhum. O elemento <ul> é o container, e cada 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 para não esquecer: a única coisa permitida como filho direto de <ul> é <li>. Você não coloca um <p> ou uma <div> direto dentro do <ul>. Se você quiser um parágrafo ou um link em um item, ele vai dentro do <li>, que pode conter qualquer conteúdo que você quiser.

Os marcadores e o recuo são a estilização padrão do navegador. O significado está no próprio elemento. Quando você chegar em CSS, vai poder mudar ou remover isso 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 a script, como <template>), então colocar uma <div> solta entre o <ul> e seus itens é inválido, e o parser não vai tratá-la 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 do bullet e o recuo são padrões de apresentação da folha de estilo embutida do navegador e não têm peso semântico algum; list-style: none os remove sem alterar o que o elemento significa. Essa separação importa porque o significado está no elemento, o marcador é só a pintura. O software de acessibilidade (o termo genérico 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: ele anuncia que uma lista está começando e quantos itens ela tem. Voltamos a falar sobre o que esse anúncio proporciona no Deep Dive sobre aninhamento.

JunoListas não ordenadas Use <ul> para uma lista em que a ordem não importa, e envolva cada item na sua própria <li>. O navegador adiciona os marcadores e as quebras de linha para você, então você nunca precisa digitá-los à mão. Demorei um pouco para confiar nisso, eu ficava querendo adicionar os pontinhos eu mesmo.

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

JunoListas não ordenadas<ul> aceita apenas <li> como filho direto, então uma <div> perdida ali é uma 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 pontinho e mantém a lista. Essa distinção é o motivo pelo qual um leitor de tela ainda consegue contar os itens depois que seu CSS esconde os marcadores.

Listas ordenadas e seus atributos

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

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

<ol>
  <li>Pré-aqueça o forno a 180°C</li>
  <li>Misture a farinha e o açúcar</li>
  <li>Coloque 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 um novo passo no meio depois, os números se renumeram automaticamente. Você nunca digita os números, e esse é o ponto de usar <ol>.

Uma lista ordenada é para itens cuja sequência carrega significado. Mesma estrutura do <ul>, só troca 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 de graça.

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

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

Essa lista vai de 4 a 5. É útil quando uma lista continua depois que algum 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 números romanos.

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

Essa lista vai de a a b em vez de 1 a 2. E reversed conta para baixo, o que serve bem para 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 números 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 número ordinal como um inteiro, independentemente do estilo de exibição, então start="4" em uma lista com numeração romana começa em iv. type define o estilo do marcador: 1, A, a, I ou i. reversed (um atributo booleano, o que significa que a mera presença dele já é o valor, sem nada para definir) conta a partir da quantidade de itens até 1.

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

Há uma distinção que a estilização pode esconder. type muda apenas como o marcador é desenhado; o valor anunciado ao software de acessibilidade e usado pelo start é sempre o inteiro subjacente. Então uma lista estilizada com letras ainda são as posições 1, 2, 3 por baixo. Quando o número ordinal faz parte do próprio conteúdo, como uma cláusula jurídica numerada para citação, prefira deixar o <ol> cuidar do número em vez de fixá-lo diretamente no texto, porque um "3." fixado em um <li> não vai se renumerar, e um leitor de tela vai lê-lo duas vezes: uma como o marcador gerado e outra como o texto. Mais um controle que vale conhecer: o atributo value em um <li> individual sobrescreve o número daquele item específico, e a lista continua contando a partir daí.

JunoListas ordenadas e seus atributos Recorra ao <ol> quando a ordem importa, como nos passos de uma receita, e o navegador numera os itens para você. Adicione ou remova um passo e os números se ajustam sozinhos, então você nunca digita 1. ou 2. à mão. Os mesmos itens <li> de antes, só que com um container diferente.

JunoListas ordenadas e seus atributos<ol> te dá três atributos úteis: start para começar de um número diferente de 1, type para letras ou numerais romanos em vez de dígitos, e reversed para contar para baixo. Todos ainda deixam o navegador gerar os números, que é justamente o motivo de usar uma lista ordenada.

JunoListas ordenadas e seus atributostype só reestiliza o marcador; o valor por trás dele, o mesmo que o start usa e que a tecnologia assistiva lê, é sempre o inteiro. Então não digite "3." à mão dentro de um <li>, ou ele não vai se renumerar e um leitor de tela vai falar o número duas vezes. Deixe o <ol> controlar a contagem, e use value em um único <li> quando precisar ajustar um item específico.

Listas de descrição

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

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

<dl>
  <dt>HTML</dt>
  <dd>A linguagem que descreve a estrutura de uma página.</dd>
  <dt>CSS</dt>
  <dd>A linguagem que descreve a aparência da página.</dd>
</dl>

O navegador mostra cada descrição recuada sob seu termo, então o pareamento fica claro de imediato. Pense em "dt" como a palavra que você está definindo e "dd" como a definição.

Quando cada item é um pareamento, e não algo isolado, uma lista de descrição se encaixa melhor do que <ul> ou <ol>. Ela é construída com três elementos: <dl> é o container, <dt> é um termo, e <dd> é a descrição vinculada a ele.

<dl>
  <dt>Autor</dt>
  <dd>Priya Anand</dd>
  <dt>Publicado em</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 dos 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 for naturalmente "isto, e seu detalhe", e recorra a <ul> ou <ol> quando os itens existirem por conta própria.

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

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

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

Essa flexibilidade é o ponto: muitos termos podem compartilhar uma descrição, e um termo pode carregar muitas descrições. Dois usos 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ções ou um conjunto de detalhes de um post, em que cada rótulo se pareia com seu valor; um <dl> diz "estes são pares de nome/valor" de um jeito que uma pilha de <div>s nunca conseguiria. Vale notar uma curiosidade de nomenclatura: <dt> e <dd> historicamente significavam "definition term" e "definition description" (termo de definição e descrição de definição), mas a especificação moderna ampliou deliberadamente esses elementos para qualquer associação nome/valor, não apenas definições de dicionário. Se seu conteúdo é uma lista simples de itens equivalentes, sem pareamento, 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> em volta de tudo, <dt> para cada termo, e <dd> para a descrição que vem depois dele. Um glossário é a imagem para guardar na cabeça: palavra, depois definição, palavra, depois definição.

JunoListas de descrição Recorra ao <dl> quando cada item é um pareamento, um termo e seu detalhe ou um rótulo e seu valor, não um conjunto de itens equivalentes. O agrupamento se adapta: um <dt> pode ter vários <dd>s, e vários <dt>s podem compartilhar um <dd>. Metadados de chave/valor, como autor e data, é onde ele mostra seu valor além dos glossários.

JunoListas de descrição<dl> significa pares de nome/valor, e a especificação ampliou <dt> e <dd> além das definições de dicionário, para qualquer rótulo-e-valor, então metadados entram no jogo. Vários termos podem compartilhar um valor, e um termo pode conter vários valores, algo que uma parede de <div>s nunca conseguiria expressar. Se os itens são equivalentes, sem nada para parear, isso é um <ul>, não um <dl>.

Aninhando listas

Listas podem ficar dentro de outras listas. Um menu pode ter "Bebidas" com opções quentes e frias abaixo, e cada uma delas com suas próprias escolhas. Colocar uma lista dentro de outra se chama aninhamento.

O ponto principal para acertar: a lista interna vai dentro de um <li>, não solta entre os itens. Você coloca o <ul> (ou <ol>) inteiro dentro do item de lista ao qual ele pertence:

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

"Café" e "Chá" fazem parte de "Bebidas", então a listinha delas fica dentro do item "Bebidas". O navegador recua um pouco mais a lista interna, para você ver que ela pertence ao item acima dela.

Para mostrar que alguns itens pertencem a outro item, você aninha uma lista dentro de outra. 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 detalha.

<ul>
  <li>Frutas
    <ul>
      <li>Maçãs</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Legumes
    <ul>
      <li>Cenouras</li>
      <li>Espinafre</li>
    </ul>
  </li>
</ul>

Você pode misturar tipos ao aninhar, um <ol> dentro de um <ul> ou o contrário, e aninhar tão profundo quanto o conteúdo realmente exigir. 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 com seções, cada uma com sua própria lista de páginas dentro do seu <li>.

O aninhamento é como a hierarquia é expressa: uma sublista é colocada dentro do <li> ao qual ela pertence, nunca como filha direta do <ul> ou <ol> pai. Errar isso (um <ul> diretamente dentro de outro <ul>) é inválido, e a recuperação do parser não tem garantia de corresponder ao que você imaginou.

O aninhamento também é onde a estrutura compensa para quem não consegue ver o recuo. Um leitor de tela anuncia uma lista, sua quantidade de itens e sua profundidade de aninhamento à medida que entra em cada nível: "lista, três itens", depois em uma sublista "lista, dois itens", e avisa o usuário quando ele sai dela de novo. Esse comentário contínuo é o equivalente não visual do recuo que seu olho lê de graça, e ele só existe se o aninhamento for marcação de verdade, e não itens empurrados com espaçamento.

Isso nos leva ao teste de honestidade para qualquer lista. Um menu de navegação (o conjunto de links que leva o visitante entre páginas, a linha no 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 identifica a região como navegação. Use uma lista de verdade quando o conteúdo for um conjunto de itens relacionados, independentemente de como o CSS depois fizer parecer. Não use uma quando não for o caso: fingir espaçamento entre blocos não relacionados envolvendo-os em <li>s para pegar de carona o espaçamento de lista diz ao software de acessibilidade "essas três coisas são um grupo de três" quando elas não são. O marcador pode ser escondido e o layout pode ser qualquer um; a escolha entre <ul>, <ol> ou <dl> deve sempre responder ao que o conteúdo honestamente é.

JunoAninhando listas Para colocar uma lista dentro de outra, coloque a interna dentro do <li> a que ela pertence, não solta entre os itens. O navegador a recua para você ver que ela faz parte do item acima. Essa regra de "dentro do <li>" é a única coisa para lembrar aqui.

JunoAninhando 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 fundo quanto o conteúdo realmente exigir. Menus de navegação com submenus são onde você vai topar com isso com mais frequência, então vale a pena se acostumar desde já.

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