HTML5 - Listas não numeradas

 

Aprendendo HTML 5

Listas não numeradas





Listas são um importante recurso existente na linguagem HTML. Com elas é possível criar tópicos de texto para definir melhor um assunto ou mesmo para criação de itens que não parecem com listas, como por exemplo, menus lateral ou superior.

Neste post iremos aprender a criar Listas Não Ordenadas ou Unordered List. Este tipo de lista é utilizado para indicar itens que não necessitam da definição de uma sequência, como por exemplo uma lista de compras.

Exemplo:

Lista não-ordenada
  • Item 1
  • Item 2
  • Item 3

Vamos criar um documento HTML 5 que mostre uma listas não-ordenada conforme a imagem a seguir:



A tag utilizada para construir uma lista não ordenada (Unordered List) é bem simples quando lembramos dela em inglês: <ul>

Outra tag importante para nosso entendimento é a indicação dos itens da lista (List Item). Esta tag segue o mesmo princípio da lista não ordenada: <li>

Vejamos o código da página acima:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8" />
        <title>Usando lista não ordenada</title>
    </head>
    <body>
        <h1>Lista não ordenada</h1>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </body>
</html>



Iniciamos a lista com a tag <ul> e fechamos com </ul>. Indicamos cada um dos itens desta lista com as tags <li> e </li>.

Para esse tipo de lista podemos configurar três diferentes tipos de representação gráfica:
  • Disco - círculo preenchido
  • Quadrado
  • Círculo - círculo vazio
Para mudarmos o tipo do item precisamos configurar o parâmetro "type" da lista não ordenada. Veja abaixo esta configuração:

 



<ul type="circle">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul> 








<ul type="square">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul> 









<ul type="disc">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul> 





No próximo post iremos incluir subitens em nossa lista.

Até a próxima.

Leia mais:




Comentários

Postar um comentário

Postagens mais visitadas