06

No HTML a gente tem 3 tipos de listas: as listas ordenadas, desordenadas e de definição. Olhando nos exemplos a baixo, a gente pode entender como funciona cada uma delas. Na lista ordenada os itens serão apresentados do nº 1 até o infinito, então o 1º item recebe nº1, depois nº2, 3, 4, 5 e assim por diante.

Na lista desordenada, os itens são organizados atráves de marcadores, como por exemplo o símbolo do circulo. Então vai ser apresentado item 1, item 2, item 3, todos eles marcados com o circulo mas sem nenhum número pra identificar. E na lista de Definição, ocorre apenas a identação desse item, então eu tenho 1º item e posso agrupar os subitens a partir daquele primeiro.

Para entender como fuciona essas tags das listas, vamos criar um exemplo de cada uma delas usando uma página HTML. Então como base a gente vai utilizar a mesma página dos exemplos anteriores, colocando o corpo da página, o título e dentro da área de seção a gente vai criar as listas. A primeira lista que a gente vai criar é a lista ordenada, pra isso a gente começa com a tag "<ol>" pra dizer que é uma lista ordenada.

E a partir de então podemos colocar os itens, cada item vai ser definido atráves da tag "<li>". Então podemos colocar o "item 1", fechamos esse item; Colocamos o "Item 2" e logo fechamos. Se quiserem colocar mais itens não tem problema, podem colocar quantos quiserem.

E aí fechamos a lista atráves da tag "</ol>". Colocamos nossa lista de itens, podemos salvar e visualizar como é que fica lá no navegador. Então notem que aqui no navegador, a gente tem um título da página "Curso de HTML", e logo em baixo a lista ordenada com os itens 1 e 2, vejam que ele já coloco o nº 1, nº2.

Se a gente voltar na página e escrever podemos colocar mais itens, então vou colocar aqui o "item 3" e 4, vamos adicionar o "item 4" e o "item 3", vamos salvar, ao atualizar a página a gente já vê ai os itens 3 e 4, e dessa forma a gente tem uma lista ordenada. Pra fazer a lista desordenada é bem simples, vamos voltar aqui pra nossa página e trocar, ao invés de "<ol>", pra significar que é uma lista ordenada, trocamos pra "<ul>", e ai definimos que é uma lista não ordenada, uma lista desordenada. Vamos salvar essa página; Atuaizar aqui no navegador.

E vejam que já trocou os itens, então antes a gente tinha os itens de 1, 2, 3 e 4, e agora esses itens estão sendo identificados pelos marcadores com essas bolinhas pretas, então a gente tem os itens já definidos pelas bolinhas, até o infinito. Já as listas de definição, elas são utilizadas quando a gente quer organizar informações, textos, dentro de um item principal. As listas de definição no HTML são definidas pela tag "<dl>", lista de definição, onde então a gente pode ter um título que vai ser definido e uma descrição.

Então aqui no nosso exemplo a gente ta descrevendo dois itens, que são liquídos, bebidas. A gente tem a definição do título "Cafe", e temos a definição do título "Leite". No caso do café ele tem duas descrições, ele é preto e ele é uma bebida quente.

Já o leite ele é uma bebida branca, ele tem a coloração branca, então a definição dela foi o branco. Notem que esse tipo de lista não vai colocar pontos, não vai colocar números, ela apenas define, ajuda a descrever como que funciona um item específico. Então ao salvar esse conjunto de tags da nossa lista de definição lá pra página, a gente vai visualizar aqui então, o café por ele ser um título, ele fica mais afastado dos outros itens, e o "preto" e o "quente" já ganham uma identação, ganham esse parágrafo, esse recúo de parágrafo, pra dizer que o preto e quente se refere ao café, e já a descrição branco se refere ao item leite.

Então a gente viu três tipos de listas, a lista ordenada, desordenada e a por definição.