Listas HTML

O HTML suporta listas ordenadas, não ordenadas e listas definidas

Exemplos

Lista não ordenada
Este exemplo demonstra a lista não ordenada.
Lista ordenada
Este exemplo demonstra a lista ordenada.

（Mais exemplos podem ser encontrados na parte inferior da página.。）

Lista não ordenada

A lista não ordenada é uma lista de itens, onde esses itens são marcados com pontos grossos (tipicamente pequenos círculos pretos).

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

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

O navegador exibe assim:

  • Café
  • Leite

Os itens da lista podem usar parágrafos, quebras de linha, imagens, links e outras listas, entre outros.

Lista ordenada

Da mesma forma, as listas ordenadas são uma coluna de itens, onde os itens são marcados com números.

As listas ordenadas começam com a tag <ol>. Cada item da lista começa com a tag <li>.

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

O navegador exibe assim:

  1. Café
  2. Leite

Os itens da lista podem usar parágrafos, quebras de linha, imagens, links e outras listas, entre outros.

Lista de definições

As listas personalizadas não são apenas uma coluna de itens, mas uma combinação de itens e notas.

As listas personalizadas começam com a tag <dl>. Cada item da lista personalizada começa com <dt>. Cada definição do item da lista personalizada começa com <dd>.

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

O navegador exibe assim:

Café
Bebida quente preta
Leite
Bebida fria branca

Os itens da lista de definições podem usar parágrafos, quebras de linha, imagens, links e outras listas, entre outros.

Mais exemplos

Diferentes tipos de listas não ordenadas
Este exemplo demonstra uma lista não ordenada.
Diferentes tipos de listas ordenadas
Este exemplo demonstra diferentes tipos de listas ordenadas.
Lista aninhada
Este exemplo demonstra como aninhar listas.
Lista aninhada 2
Este exemplo demonstra listas aninhadas mais complexas.
Lista de definições
Este exemplo demonstra uma lista de definições.

Etiqueta de lista

Etiqueta Descrição
<ol> Define a lista ordenada.
<ul> Define a lista não ordenada.
<li> Define o item da lista de definições.
<dl> Define a lista de definições.
<dt> Define o item da definição.
<dd> Define a descrição da definição.
<dir> Descontinuado. Use <ul> em vez disso.
<menu> Descontinuado. Use <ul> em vez disso.