Nessa aula vamos aprender o que é uma lista ordenada, não ordenada e dominar as tags para criar listas no HTML.

Em algumas situações quando vamos criar conteúdos para a nossa página HTML precisamos listar informações. Como por exemplo:

Motivos para ir ao cinema:

  • Tela enorme;
  • Sensação de estar dentro do filme;
  • Ambiente aconchegante;

3 características sobre o HTML:

  1. Linguagem de Marcação;
  2. Utilização de tags;
  3. Fácil de usar;

O HTML nos fornece uma maneira muito simples de criar listas como essas que vimos acima.

Lista não ordenada

No primeiro exemplo temos um modelo de lista não ordenada. Uma lista possui apenas uma marcação no início de cada item que pode ser uma bolinha, porém não indica uma ordem numérica nos itens.

Nas listas não ordenadas os ites não são contabilizados. Apenas marcados.

Para criar ums lista não ordenadas simples usamos as tags:

Nesse código de lista acima, a tag <ul> indica onde começa a lista, e a tag <li> é usada para informar cada item da lista, ao final dos itens fechamos a lista com </ul>.

Listas aninhadas

Uma possibilidade que o HTML nos fornece é colocarmos uma lista dentro de outra. Imagine que dentro de um item da lista você quer inserir outra sub lista. Ficaria mais ou menos assim:

Esse exemplo acima ficaria assim:

  • Primeiro item
    • Aqui é o sub item 1
    • Aqui o 2
    • Esse é o 3
  • Segundo item
  • Terceiro item

Atributo na lista não ordenada

No caso das listas não ordenadas podemos usar o atributo “type” para determinar o símbolo de marcação dos itens da lista. O símbolo padrão é a bolinha preenchida.

Para mudar o símbolo de marcação dos itens da lista usamos:

<ul type=”disc”> Bolinha preenchida (já vem como padrão sem precisar inserir esse atributo);

<ul type=”circle”> Círculo vazio por dentro;

<ul type=”square”> Quadrado;

  • lista com disc
  • Esta com circle
  • E essa com square

Lista ordenada

No segundo exemplo do início da aula “3 características sobre o HTML” temos uma lista ordenada. A lista ordenada possui contagem dos itens, diferente da não listada.

Na lista ordenada representamos cada item com uma numeração ou uma letra do alfabeto, para simbolizar uma contagem.

Lista ordenada simples:

O modelo acima é mostrado como:

  1. Primeiro item
  2. Segundo item
  3. Terceiro item

Naturalmente quando usamos a tag <ol> a lista é ordenada por números no início de cada item. Mas podemos trabalhar outras possibilidades como usar letras do alfabeto ou algarismos romanos. Para isso usamos o atributo “type”.

Atributos na lista ordenada

Para ordenar a lista utilizando as letras do alfabeto de forma crescente (1º item a, 2º item b, etc) utilizamos no atributo “type” o valor “A” para as letras ficarem maiúsculas e “a” para as letras ficarem minúsculas.

Exemplo com letras maiúsculas:

Com letras minúsculas:

Para ordenar a lista utilizando algarismos romanos maiúsculos:

Algarismos romanos minúsculos: