Listas em HTML

A HTML suporta listas ordenadas, não ordenadas e de definições.

Exemplos

Uma lista não ordenada
Este exemplo demonstra uma lçista não ordenada.

Uma lista ordenada
Este exemplo demonstra uma lista ordenada.

(Você pode encontrar mais exemplos no final desta página.)

Listas Não Ordenadas

Uma lista não ordenada é uma lista de itens. As listas de itens são marcadas com bullets (tipicamente pequenos círculos pretos).

Uma lista não ordenada começa com a tag <ul>. Cada item da lista começa com a tag <li>.

<ul>
<li>Café</li>
<li>Leite</li>
</ul>

Aqui está como aparece em um navegador:

• Café
• Leite

Dentro de um item de uma lista você pode colocar parágrafos, quebras de linha, imagens, vínculos, outras listas, etc.

Listas ordenadas

Uma lista ordenada é também uma lista de itens. As listas de itens são marcadas com números.

Uma lista ordenada começa com a tag <ol>. Cada item da lista começa com a tag <li>.

<ol>
<li>Café</li>
<li>Leite</li>
</ol>

Aqui está como aparece em um navagador:

1. Café
2. Leite

Dentro de um item de uma lista você pode colocar parágrafos, quebras de linha, imagens, vínculos, outras listas, etc.

Lista de Definições

Uma lista de definições não é uma lista de itens. Esta é uma lista de termos e explicações dos termos.

Uma lista de definições começa com a tag <dl>. Cada termo da lista de definições começa com a tag <dt>. Cada definição da lista de definições começa com a tag <dd>.

<dl>
<dt>Café</dt>
<dd>Bebida quente preta</dd>
<dt>Leite</dt>
<dd>Bebida fria branca</dd>
</dl>

Aqui está como aparece em um navegador:

Café

Bebida quente preta

Leite

Bebida fria branca

Dentro de uma definição de lista de definições você pode colocar parágrafo, quebras de linha, imagens, vínculos, outras listas, etc.

Mais Exemplos

Diferentes tipos de listas ordenadas
Este exemplo demonstra diferentes tipos de listas ordenadas.

Diferentes tipos de listas não ordenadas
Este exemplo demonstra diferentes tipos de listas não ordenadas.

Listas aninhadas
Este exemplo demonstra como você pode aninhar listas.

Listas aninhadas 2
Este exemplo demonstra uma lista aninhada mais complicada.

Lista de definições
Este exemplo demonstra uma lista de definições.

Tags de Listas