Listas

HTML provê uma maneira interessante de ordenar elementos em listas.

Listas são importantes para trazer o conteúdo mais organizado para o seu usuários, e também facilita a varredura de informações.

Conteúdo

Lista Ordenada

Talvez esta seja a lista mais comum utilizada na Internet para organizar itens.
Veja o exemplo:

<p>Este é um exemplo de lista ordenada:</p>
<ol>
    <li>Primeiro item</li>
    <li>Segundo item</li>
    <li>Terceiro item</li>
    <li>Quarto item</li>
    <li>E por aí vai. 🙂 </li>
</ol>

Executando o código acima, você terá o seguinte resultado:

Este é um exemplo de lista ordenada:

Primeiro item
Segundo item
Terceiro item
Quarto item
E por aí vai. 🙂

Lista ordenada por números

Você também pode enumerar a lista, adicionando o atributo type=”1″. Veja o exemplo abaixo:

<p>Esta é o exemplo de lista ordenada:</p>
<ol type="1">
    <li>Primeiro item</li>
    <li>Segundo item</li>
    <li>Terceiro item</li>
</ol>

Lista ordenada por letras

Você também pode criar uma lista ordenada por letras, basta adicionar o atributo type=”a”. Caso queira que as letras fiquem maiúsculas, basta adicionar o atributo type=”A”.

Listas não-ordenadas

Listas não-ordenadas servem para exibir pontos ou resumos em um texto.

<p>Este é um exemplo de lista não-ordenada:</p>    
<ul>
    <li>Primeiro item da lista</li>
    <li>Segundo item da lista</li>
    <li>Terceiro item da lista</li>
</ul>

Executando o código acima, exibirá o seguinte:

Este é um exemplo de lista não-ordenada:

Primeiro item da lista
Segundo item da lista
Terceiro item da lista

Lista de descrições

Não é exatamente uma lista de itens. Serve para mostrar uma lista com conceitos e definições.

 <dl>
  <dt>Rodrigo</dt>
  <dd>- analista desenvolvedor de software sênior</dd>
  <dt>Thomas</dt>
  <dd>- estagiário de desenvolvimento</dd>
</dl>

Aplicando o código acima, você terá o seguinte resultado:

Rodrigo: – analista desenvolvedor de software sênior
Thomas: – estagiário de desenvolvimento