listas

HTML aceita listas que podem ser numeradas, não numeradas e de definição, sendo possível, inclusive, incluir sub-itens nas listas. Podemos usar as tags <ul> fechadas com </ul> para iniciar listas não numeradas, marcadas apenas com pontos gráficos. Por exemplo,

<h3>Lista não numerada</h3>
<ul>
<li> Primeiro item
<li> Segundo item
<li> Terceiro item
</ul>

produzirá:

Lista não numerada

• Primeiro item
• Segundo item
• Terceiro item

Essa tag também pode ser usada para criar sub-itens na lista:

<h3>Lista não numerada com sub-itens</h3>
<ul>
<li> Primeiro item
<li> Segundo item
<ul>
<li> Primeiro sub-item
<li> Segundo sub-item
<ul>
<li> Primeiro item de sub-item
<li> Segundo item de sub-item
</ul></ul>
<li> Terceiro item
</ul>

Eis o resultado:

Lista não numerada com sub-itens

• Primeiro item
• Segundo item
  • Primeiro sub-item
  • Segundo sub-item
    • Primeiro item de sub-item
    • Segundo item de sub-item
• Terceiro item

Quando desejamos tabular um parágrafo à direita, podemos usar uma lista de definição. Nas listas de definição, podemos usar as seguintes tags: <dl> para iniciar e </dl> para fechar a lista; <dt> para abrir e </dt> para fechar um título; e <dd> para iniciar e </dd> para encerrar um texto. Obs. Essas tags devem ser usadas em conjunto:

<dl>
<dt>Esse é um título da lista</dt>
<dd>Eis aqui um primeiro texto</dd>
<dt>Eis outro Título</dt>
<dd>Novo texto para a lista</dd>
</dl>

resultado:

Esse é um título da lista

Eis aqui um primeiro texto

Eis outro Título

Novo texto para a lista

Se quisermos uma lista numerada, usamos: <ol> </ol>

<h3>Lista numerada</h3>
<ol>
<li> Primeiro item da Lista
<li> Segundo item da Lista
<li> Terceiro item da Lista
</ol>

resultado:

Lista numerada

1. Primeiro item da Lista
2. Segundo item da Lista
3. Terceiro item da Lista

Bem... podemos fazer uma salada de listas:

<h1>Salada de listas</h1>
<DL>
<DT>Primeiro item da lista
<DD>Primeiro item da lista de definição
<UL>
<LI>Primeiro item não numerado desta lista
<OL>
<LI>Primeiro sub-item numerado desta lista
<LI>Segundo sub-item numerado desta lista
<UL>
<LI>Primeiro item não numerado do sub-item numerado
<LI>Segundo item não numerado do sub-item numerado
</UL>
<LI>Terceiro sub-item numerado desta lista
</OL>
<LI>Segundo item não numerado desta lista
<LI>Terceiro item não numerado desta lista
</UL>
<DT>Segundo Item da Lista
<DD>Segundo item da Lista de Definição
<OL>
<LI>Primeiro item numerado desta lista
<LI>Segundo item numerado desta lista
</OL>
<DT>Terceiro Item da Lista
</OL>
</DL>

Eis a saída:

Salada de listas

Primeiro item da lista

Primeiro item da lista de definição

• Primeiro item não numerado desta lista
  1. Primeiro sub-item numerado desta lista
  2. Segundo sub-item numerado desta lista
     • Primeiro item não numerado do sub-item numerado
     • Segundo item não numerado do sub-item numerado
  3. Terceiro sub-item numerado desta lista
• Segundo item não numerado desta lista
• Terceiro item não numerado desta lista

Segundo Item da Lista

Segundo item da Lista de Definição

1. Primeiro item numerado desta lista
2. Segundo item numerado desta lista

Terceiro Item da Lista