Criar Listas em HTML

Além de Cabeçalhos e Parágrafos, um dos recursos mais utilizados da Linguagem HTML são as Listas. Com HTML é possível criar Listas Ordenadas e Listas Não Ordenadas.


Listas Ordenadas

Para criar uma Lista Ordenada, devemos utilizar a Tag <ol> (Ordered List). Além disso, cada elemento da lista deve estar entre a abertura e o fechamento da Tag <li>.

Para melhorar o entendimento, preparei um exemplo simples. Pintei a Tag <ol> de vermelho e as Tags <li> de azul apenas para facilitar a compreensão. Veja o código:
<html>
<head>
<title>Lista Ordenada</title>
</head>
<body>
<h1>Lista de Compras</h1>
<ol>
<li>3 latas de Óleo de Soja</li>
<li>20 KG de Arroz Branco</li>
<li>10 KG de Feijão Preto</li>
</ol>
</body>
</html>

Veja o resultado:
Lista Ordenada HTML
Conheça também alguns parâmetros da Tag <ol>:
Parâmetro Descrição Observações
start Define o início da lista Exemplo: <ol start="3"> (inicia com o número 3)
type Define o estilo da lista Valores possíveis: "1", "a", "A", "i" e "I"

Listas Não Ordenadas

Já para criar uma Lista Não Ordenada, utilizamos a Tag <ul> (Unordered List). Cada um dos elementos de uma Lista Não Ordenada também deve estar entre a abertura e o fechamento da Tag <li>. Veja um exemplo:
<html>
<head>
<title>Lista Não Ordenada</title>
</head>
<body>
<h1>Lista de Compras</h1>
<ul>
<li>3 latas de Óleo de Soja</li>
<li>20 KG de Arroz Branco</li>
<li>10 KG de Feijão Preto</li>
</ul>
</body>
</html>
Observe o resultado:
Lista Não Ordenada HTML
Conheça também o principal parâmetro da Tag <ul>:

Parâmetro Descrição Observações
type Define o estilo da lista Valores possíveis: "disc", "square" e "circle"


Leia mais:

4 comentários:

  1. Parabéns, colocou detalhes raros de se encontrar em outras páginas relacionadas.

    ResponderExcluir
  2. Como faço para fazer uma lista que só apareça quando clicar nela?
    Tipo essa lista:
    -Multimidia
    -Imagens
    -Videos
    Mas que só apareça a parte de Imagens e Videos quando clicar em Multimídia.

    ResponderExcluir
    Respostas
    1. Rapaz, para isso você vai precisar usar Javascript. Pior que nem tenho como fazer um exemplo aqui pois o blogger não deixa eu escrever código aqui. Sugiro dar uma olhada no curso de Javascript do W3Schools (https://www.w3schools.com/js/default.asp). Abraço!

      Excluir

O que você achou do post? Faça um comentário.

Aprenda a receber dados de Formulário com PHP

Existem três arrays associativos que podemos usar para receber dados de Formulários HTML em PHP. São eles: $_GET , $_POST e $_REQUEST . O...