Olá pessoal, nesse artigo vamos entender como funcionam as listas (ordenadas, desordenadas e de definições).

As listas são muito importantes quando queremos listar alguns itens no site e também para a criação de menu de navegação.

As listas ordenadas, como o próprio nome já diz, os itens serão listados de forma ordenada, seja por número, letra, ou algarismos romanos.

Uma lista ordenada começa com a tag “<ol>” e seus respectivos itens da lista ficam dentro da tag “<li>”. Por padrão as listas ordenadas são ordenadas por números, mas também iremos ver como ordena-la por outros métodos.

Vamos ao código:

<html>
<head>
<title>Listas em HTML</title>
</head>

<body>
<ol>
<li>Nome</li>
<li>Telefone</li>
<li>Endereço</li>
<li>País</li>
</ol>
</body>
</html>
 

Aparecerá assim no site:

Lista ordenada

Como havia dito, podemos ordenar também por a,b,c,d, etc. Caso queira que seja ordenada por letras maiúsculas, basta em colocar <ol type=”A”>.

<html>
<head>
<title>Listas em HTML</title>
</head>

<body>
<ol type="a">
<li>Nome</li>
<li>Telefone</li>
<li>Endereço</li>
<li>País</li>
</ol>
</body>
</html>

Ficará assim no site:

Lista ordenada com alfa

Além desses dois tipos de ordenação, existem diversos tipos como Algarismos Romanos:

<html>
<head>
<title>Listas em HTML</title>
</head>

<body>
<ol type="I">
<li>Nome</li>
<li>Telefone</li>
<li>Casa</li>
<li>Estado</li>
</ol>
</body>
</html>

A imagem ficará assim:

Lista não ordenada

Já as Listas Desordenadas são iniciadas com a tag <ul> e são representadas por pequenos “bullets”, vamos ao código:

<html>
<head>
<title>Listas em HTML</title>
</head>

<body>
<ul>
<li>Nome</li>
<li>Telefone</li>
<li>Casa</li>
<li>Estado</li>
</ul>
</body>
</html>

A imagem ficará assim:

Lista não ordenada

Já as listas por definição são um pouco mais diferente, elas são representadas pela tag <dl>, seguido de <dt> e <dd>, ficando assim no código:

<html>
<head>
<title>Listas em HTML</title>
</head>

<body>
<dl>
<dt>Html</dt>
<dd> Html Basico</dd>
<dd> Html Avançado</dd>
<dt> PHP</dt>
<dd> PHP Básico</dd>
<dd> PHP Intermediário</dd>
<dd> PHP Avançado</dd>
</dl>
</body>
</html>

Na Exibição ficará assim:

Lista não ordenada agrupada

Conclusão

Hoje aprendemos a trabalhar com listas ordenadas, listas desordenadas e listas de definição. As listas desordenadas são muito usadas para a criação de menu de navegação.

Espero que tenham gostado e até o próximo artigo.

Você pode conferir alguns artigos bem legais que escrevo no meu blog clicando no link a seguir: Ricardo Arrigoni.

Não deixe também de conferir o Curso de HTML para Iniciantes