Listas

Uma lista de compras e uma receita são listas, mas só uma delas estraga se você mudar a ordem. O HTML tem um elemento diferente para cada uma.

Listas não ordenadas e ordenadas

Se a ordem dos itens não importa, use uma lista não ordenada, <ul>. Os navegadores marcam cada item com um marcador. Se a ordem importa, como nos passos de uma receita ou num ranking, use uma lista ordenada, <ol>, e o navegador numera os itens por você. Nos dois casos, cada item é um <li>, um item de lista, e os únicos elementos permitidos diretamente dentro de <ul> ou <ol> são elementos <li>. Texto e outros elementos vão dentro dos itens.

<h2>You will need</h2>
<ul>
  <li>500 g flour</li>
  <li>10 g salt</li>
  <li>350 ml warm water</li>
</ul>

<h2>Method</h2>
<ol>
  <li>Mix everything in a bowl.</li>
  <li>Leave it covered for 12 hours.</li>
  <li>Shape and bake at 230 degrees for 40 minutes.</li>
</ol>

Por que não digitar você mesmo os números ou os traços? Porque aí o navegador não sabe que existe uma lista. Um leitor de tela anuncia uma lista de verdade com o tamanho dela, por exemplo lista, 3 itens, então quem ouve sabe quanto vem pela frente e pode pulá-la. Quando você insere um passo num <ol>, todos os números seguintes se atualizam sozinhos; com números digitados, você teria de renumerar à mão.

Opções das listas ordenadas

<ol> tem alguns atributos. start="4" começa a contagem em 4, útil quando uma lista continua depois de um parágrafo. reversed conta de trás para a frente, para uma lista dos dez mais. type troca o marcador por letras ou algarismos romanos: type="a", type="A", type="i" ou type="I". Um único item também pode saltar para um número com value, como em <li value="10">. A aparência dos marcadores e dos números (forma, cor, ou se aparecem ou não) é controlada pelo CSS.

Listas dentro de listas

Um item de lista pode conter uma lista inteira. Coloque o <ul> ou <ol> interno dentro do <li> ao qual ele pertence, depois do texto desse item e antes da tag de fechamento. Um erro comum é pôr a lista interna entre dois elementos <li>, direto dentro da lista externa, o que não é permitido. É com listas aninhadas que os sites fazem menus com submenus e que os esquemas mostram subtópicos.

<ul>
  <li>Bread
    <ul>
      <li>Sourdough</li>
      <li>Rye</li>
    </ul>
  </li>
  <li>Cakes</li>
</ul>

Listas de descrição

O terceiro tipo de lista junta termos e descrições, como um glossário ou um conjunto de perguntas e respostas. <dl> é a lista de descrição, <dt> guarda um termo e <dd> guarda a descrição dele. Um termo pode ter várias descrições, e vários termos podem dividir uma. Por padrão, os navegadores recuam as descrições.

As listas aparecem em lugares inesperados. O menu no topo da maioria dos sites é um <ul> de links dentro de um <nav>; o CSS põe os itens em linha e esconde os marcadores. Uma fileira de cartões de produtos ou um conjunto de resultados de busca muitas vezes também é uma lista. Quando você vir um grupo de coisas parecidas, pergunte se é uma lista; a resposta costuma ser sim.

Um jeito rápido de escolher entre as duas: imagine embaralhar os itens. Se embaralhar muda o sentido, como nos passos de uma receita ou numa lista dos dez mais, a lista é ordenada e precisa de <ol>. Se nada muda, como numa lista do que levar na mala, use <ul>. Mantenha cada item curto e comece todos do mesmo jeito gramatical, para que a lista seja fácil de percorrer.