Don't Miss

Listas

By on Janeiro 26, 2018

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.

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:

  1. Primeiro item
  2. Segundo item
  3. Terceiro item
  4. Quarto item
  5. 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

About Rodrigo Macedo

Rodrigo Macedo é desenvolvedor de software sênior e empresário. Possui 10 anos de experiência como desenvolvedor, focado nas linguagens c# e PHP.

Leave a Reply

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *