HTML moderno: estrutura, semântica e acessibilidade
Listas agrupam itens relacionados e tornam a estrutura explícita. Use ul quando a ordem não altera o significado, ol quando a sequência importa e dl para pares de nomes e descrições.
ul e ol
Itens de ul e ol são marcados com li. Listas ordenadas aceitam atributos como start, reversed e value, úteis quando a numeração carrega informação real.
<ol>n <li>Crie a pasta do projeto</li>n <li>Adicione o index.html</li>n <li>Abra no navegador</li>n</ol>dl para relações nome–valor
Uma lista de descrição contém grupos de dt e dd. Ela serve para glossários, metadados e perguntas com respostas curtas — não apenas para termos de dicionário.
<dl>n <dt>HTML</dt>n <dd>Estrutura e semântica do documento.</dd>n <dt>CSS</dt>n <dd>Apresentação e layout.</dd>n</dl>Aninhamento e estilo
Uma sublista deve ficar dentro do li ao qual pertence. Ao personalizar marcadores, preserve a semântica da lista; remover marcadores visualmente pode fazer alguns leitores perderem a indicação de lista, dependendo do CSS e navegador.
Checklist de qualidade
- A ordem muda o significado?
- Cada sublista está dentro de um li?
- A estrutura continua reconhecível por tecnologia assistiva?
Pratique agora
Marque uma receita com ol, uma lista de compras com ul e um pequeno glossário com dl.
