HTML tem três tipos de lista, cada um com significado semântico. Usar o correto ajuda a acessibilidade (leitores de tela anunciam "lista, 3 itens") e estrutura.
Lista não ordenada — a ordem não importa
html
Apples
Bananas
Cherries
HTML tem três tipos de lista, cada um com significado semântico. Usar o correto ajuda a acessibilidade (leitores de tela anunciam "lista, 3 itens") e estrutura.
Apples
Bananas
Cherries
Renderiza com marcadores por padrão. Use para menus de navegação, listas de recursos, tags — qualquer coisa em que a sequência não seja significativa.
<ol type="1" start="1">
<li>Preheat the oven</li>
<li>Mix ingredients</li>
<li>Bake for 20 minutes</li>
</ol>
Renderiza com números. Use para etapas, classificações, instruções. Atributos: type (1, a, A, i, I), start (primeiro número), reversed.
<dl>
<dt>HTML</dt>
<dd>The markup language for web pages.</dd>
<dt>CSS</dt>
<dd>The styling language for web pages.</dd>
</dl>
<dt> é o termo, <dd> sua descrição — ótimo para glossários, metadados e pares chave/valor.
<nav>
<ul>
<li><a href="/">Home</a>
<ul><li><a href="/sub">Sub-page</a></li></ul> <!-- nested submenu -->
</li>
</ul>
</nav>
Menus de navegação são convencionalmente marcados como um <ul> dentro de <nav>.
Listas não são apenas para marcadores — elas dão ao conteúdo uma estrutura que leitores de tela anunciam e que você pode estilizar livremente (os marcadores padrão são facilmente removidos com CSS).
Escolher <ul> vs <ol> vs <dl> comunica significado: não ordenada, sequencial ou termo-definição.