Listas são bem importantes para organizar ideias, não acha? Quando falamos de listas no HTML, estamos dizendo que tal conteúdo se relaciona entre si, que possui uma sequência, que é uma parte organizada de uma tal seção.

Por exemplo, vamos dizer que eu tenho um site de receitas, ao detalhar o passo a passo dos ingredientes, em vez de usar vários parágrafos é semânticamente correto usar listas. Mesmo que visualmente o resultado possa ser igual.

Gosto de dizer que não é apenas fazer um layout bonito, mas sim saber programar uma boa estrutura por trás disso, até porque como vimos na seção Tags de conteúdo a semântica ajuda no SEO.

Temos as seguintes opções de listas em HTML:

• ul: define listas não ordenadas;
• ol: define listas ordenadas;
• dl: define uma lista de definição/descrição (como um FAQ ou glossário).

UL - Lista não ordenada

Recebe como filhos as tags <li>, que podem receber qualquer tag dentro, como <p>, <a>, <img>, entre outras. Inclusive você pode fazer uma lista dentro de uma lista.

OL - Lista ordenada

Recebe como filhos as tags <li>, que podem receber qualquer tag dentro, como <p>, <a>, <img>, entre outras. Inclusive você pode fazer uma lista dentro de uma lista. Aqui as tags <li> vem por padrão numeradas.

DL - Lista de definição

Recebe como filhos as tags <dt>, para definir o título da definição/descrição, e <dd> que é a definição/descrição referente ao título.

Agora você já pode incrementar melhor o site que você fez anteriormente colocando listas nas suas seções. Algumas ideias:

• Faça um site de receitas;
• Faça uma lista de compras;
• Faça uma lista de habilidades/formações em seu currículo.

Abaixo deixarei o bloco de código editável para isso, ou abra o Codepen.

See the Pen código vazio by paolaguedes (@paolaguedes) on CodePen.