Listas em HTML

Veja neste artigo como trabalhar com listas ordenadas, desordenadas e por definição em HTML

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:

  1. Nome
  2. Telefone
  3. Endereço
  4. 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:

  1. Nome
  2. Telefone
  3. Endereço
  4. 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:

  1. Nome
  2. Telefone
  3. Casa
  4. 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:

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.

Confira também

Curso de HTML Básico

Curso

Introdução ao CSS na prática

Curso

HTML e CSS para Programadores

Guia

Artigos relacionados