Nesse artigo vamos entender como funcionam as listas (ordenadas, desordenadas e de definições) no HTML.
Guia do artigo:
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.
Listas ordenadas
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:
- Nome
- Telefone
- Endereço
- País
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:
- Nome
- Telefone
- Endereço
- País
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:
- Nome
- Telefone
- Casa
- Estado
Listas desordenadas
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:
- Nome
- Telefone
- Casa
- Estado
Listas por definição
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:
- Html
- Html Basico
- Html Avançado
- PHP
- PHP Básico
- PHP Intermediário
- PHP Avançado
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.
