HTML Básico – Listas

Nesta aula vamos falar sobre as Listas que permitem apresentar informações de forma bem formatada e semântica.

As listas em HTML podem ser de 3 tipos diferentes para objetivos distintos:

• Listas não ordenadas: São listas criadas sem especificar uma ordem;
• Listas ordenadas: Cria uma lista de itens relacionados em uma ordem específica;
• Lista de descrição: Serve para criar lista de termos e suas descrições.

Nota: Os itens da lista podem conter os diversos elementos HTML, como imagens, links, etc. Além disso, vocÊ pode colocar um outra lista inteira dentro de um item para criar uma lista aninhada, como chamamos.

Listas não ordenadas

Uma lista não ordenada é criada a partir do elemento <ul> (Unordered Lists) e cada item da lista é definido com o elemento <li> (List Item).

Aqui está um exemplo de como seria uma lista não ordenada:

<ul>
 <li> Bolo de chocolate </li>
 <li> Bolo Floresta Negra </li>
 <li> Bolo de abacaxi </li> 
</ul>

Resultado:

• Bolo de chocolate
• Bolo Floresta Negra
• Bolo de abacaxi

Dica: Você pode alterar o estilo padrão das listas usando CSS.

Listas ordenadas

As listas ordenadas são criadas com o elemento <ol> (Ordered Lists) e, assim como as não ordenadas, cada item usa um elemento <li>.

Aqui vai um exemplo de uma lista com uma sequência/ordem de números:

<ol> 
    <li> Aperte o cinto de segurança </li> 
    <li> Ligue o motor do carro </li> 
    <li> Olhe em volta e vá </li> 
</ol>

Resultado:

1. Aperte o cinto de segurança
2. Ligue o motor do carro
3. Olhe em volta e vá

Listas de descrição

Apesar de não serem tão usais quanto as outras duas, oferece uma forma de listagem interessante.

A lista é criada usando o elemento <dl>(Description List) e para criar os itens, usamos o elemento <dt>que especifica o termo a ser descrito e o elemento <dd> para definir a descrição.

Nota: Geralmente os navegadores colocam termos e descrições em linhas separadas e os ainda são ligeiramente recuados.

Aqui está um exemplo de como seria uma lista dessas:

<dl> 
    <dt> Pão </dt> 
    <dd> Um alimento assado feito de farinha. </dd> 
    <dt> Café </dt> 
    <dd> Uma bebida feita com grãos de café torrados. </dd> 
</dl>

Resultado:

Pão

Um alimento assado feito de farinha.

Café

Uma bebida feita com grãos de café torrados.