ul vs ol: ordem que importa, ou não

Duas tags, um teste para escolher entre elas

<ul>
  <li>Blue T-Shirt</li>
  <li>Red Hoodie</li>
  <li>Black Jeans</li>
</ul>

<ol>
  <li>Add items to your cart</li>
  <li>Enter shipping details</li>
  <li>Confirm payment</li>
</ol>

Aplique um teste toda vez, como os cursos de HTML semântico fizeram com article/section/aside: se você embaralhasse os itens, o significado mudaria? O conteúdo de um carrinho significa o mesmo em qualquer ordem, então vai em <ul> (lista não ordenada). Os passos do checkout acontecem em sequência, e embaralhá-los deixa as instruções erradas, então vão em <ol> (lista ordenada).

Os dois compartilham o mesmo filho: li

<ul>
  <li>Item one</li>
</ul>
<ol>
  <li>Item one</li>
</ol>

O <li> (item de lista) é o único filho direto válido dos dois tipos de lista. O contêiner (ul ou ol) carrega a afirmação de ordem; o li é igual nos dois.

A estilização visual padrão é uma convenção, não o significado

Navegadores mostram marcadores no <ul> e números no <ol> por padrão. Isso reforça a afirmação visualmente, mas ela mora na tag. O curso de HTML semântico: layout disse o mesmo de header/main/footer. Escolher a tag porque a lista numerada "fica mais bonita" repete esse erro.

Um erro comum e genuíno: ol só por ênfase visual

<!-- Errado: features não têm sequência real -->
<ol>
  <li>Free shipping</li>
  <li>30-day returns</li>
  <li>Lifetime warranty</li>
</ol>

Essas três features não carregam ordem inerente nenhuma: nada muda se "Lifetime warranty" for lida primeiro. Uma lista numerada aqui faz uma reivindicação falsa: que as posições 1, 2, 3 significam algo, quando não significam. O <ul> é a escolha honesta, mesmo que um selo numerado possa parecer visualmente atraente num mockup de design.

Onde o Rails gera essas listas a partir de dados reais

<ul>
  <% @cart_items.each do |item| %>
    <li><%= item.name %></li>
  <% end %>
</ul>

<ol>
  <% @checkout_steps.each do |step| %>
    <li><%= step.description %></li>
  <% end %>
</ol>

A coleção iterada costuma ser uma pista forte. Se a ordem dela é acidental, como numa query sem ORDER BY significativo, use <ul>. Se a posição codifica uma sequência, use <ol>.

Como este curso está organizado

• Aula 2: por que listas são mais do que visuais: o papel de lista e a contagem de itens
• Aula 3: a armadilha do CSS: list-style: none pode esconder uma lista do VoiceOver no Safari
• Aula 4: listas aninhadas e a única regra estrutural que importa
• Aula 5: os atributos extras do <ol>: start, reversed, type
• Aula 6: <dl>, listas de pares
• Aula 7: estruturando um menu de navegação e uma FAQ de verdade, de ponta a ponta

Pontos-chave

• O teste: embaralhar os itens mudaria o significado? Se não, <ul>; se sim, <ol>.
• O <li> é o único filho direto válido de qualquer um dos dois tipos de lista: só a tag contêiner carrega a reivindicação de ordenação.
• Marcadores e números padrão reforçam a afirmação visualmente; quem a faz é a tag. Escolher a tag pela aparência repete o erro de que os cursos de HTML semântico falaram.
• Uma lista numerada em conteúdo inerentemente não ordenado (tipo uma lista de features) faz uma reivindicação falsa sobre uma sequência que não existe.