Listas (ol/ul)
O curso trata dos elementos de lista do HTML e de quando usar cada um. Começa com um teste para escolher entre ul e ol: ver se embaralhar os itens muda o significado. Mostra como as listas passam ao leitor de tela o papel de lista e a contagem de itens. Explica um comportamento do Safari em que list-style: none tira a semântica de lista, e o conserto com role="list". Também aborda listas aninhadas, os atributos start, reversed e type do ol, listas de descrição com dl e um exemplo de página completa.
O que você vai aprender
- ✓Escolher entre ul e ol com o teste de embaralhar
- ✓Como as listas passam o papel de lista e a contagem de itens ao leitor de tela
- ✓Usar role="list" quando list-style: none remove os marcadores no Safari
- ✓Aninhar uma sublista dentro do li pai
- ✓Numerar listas ordenadas com start, reversed e type
- ✓Montar pares de termo e descrição com dl, dt e dd
ul vs ol: ordem que importa, ou não
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…
Ler a aula completa grátis →Currículo
7 aulasul vs ol: ordem que importa, ou não
Usa um teste de embaralhar os itens para escolher entre ul e ol, com li como único filho direto.
Listas não são só visuais: o papel de lista e a contagem de itens
Mostra como ul e ol entregam ao leitor de tela o papel de lista e a contagem de itens.
A armadilha do CSS: list-style: none pode quebrar leitores de tela silenciosamente
Explica como list-style: none faz o Safari tirar a semântica de lista fora do nav e como role="list" a devolve.
Listas aninhadas: a única regra estrutural que importa
Ensina que uma lista aninhada precisa ficar dentro do li pai, nunca ao lado dele como irmã.
Os atributos extras do ol: start, reversed, e type
Apresenta os atributos start, reversed e type, que controlam a numeração de uma lista ordenada.
dl: listas de pares, não só marcadores
Apresenta o dl para pares de termo e descrição, como especificações, glossários, FAQs e metadados.
Juntando tudo: um menu de navegação e FAQ de verdade
Monta um menu de navegação, uma seção de passos numerados e uma FAQ, cada um com sua lista.