Artigos HTML e CSS Listas 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:

  • 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.

Confira também

Curso de HTML Básico

Curso de HTML Básico

Curso
Introdução ao CSS na prática

Introdução ao CSS na prática

Curso
HTML e CSS para Programadores

HTML e CSS para Programadores

Guia