Listas em HTML

Há vários tipos de listas em HTML, sendo estas as mais usadas e corretamente apresentadas pelos browsers:

Listas de Definição

Estas listas são chamadas também “Listas de Glossário”, uma vez que têm o formato:

<DL>
<DT>termo a ser definido
<DD>definição
<DT>termo a ser definido
<DD>definição
</DL>

Que produz:

termo a ser definido: definição
termo a ser definido: definição

Este tipo de lista é muito utilizado para diversos efeitos de organização de páginas, por permitir a tabulação do texto. Um exemplo são os índices de navegação presentes nas páginas deste tutorial; outro exemplo é a lista composta abaixo:


<DL>
<DT>Imperadores do Brasil:

<DD>D. Pedro I

<DL>
<DD>Nome completo: Pedro de Alcântara Francisco Antônio João
Carlos Xavier de Paula Miguel Rafael Joaquim José Gonzaga Pascoal
Cipriano Serafim de Bragança e Bourbon 
</DL>

<DD>D. Pedro II

<DL>
<DD>Nome completo: Pedro de Alcântara João Carlos Leopoldo
Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel Gabriel
Rafael Gonzaga 
</DL>
</DL>

Imperadores do Brasil:: D. Pedro I; D. Pedro II

Introdução à linguagem HTML
O documento básico e seus componentes: Atributos gerais de um documento; Cabeçalhos; Separadores; Listas
Formatação de textos e caracteres
Ligações (uso de links)
Inserção de imagens

Listas não-numeradas

São equivalentes às listas com marcadores do MS Word:


<UL>
<LI>item de uma lista
<LI>item de uma lista, que pode ser tão grande quanto se queira, sem 
que seja necessário se preocupar com a formatação das 
margens de texto
<LI>item
</UL>

item de uma lista
item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto
item

A diferença está na mudança dos marcadores, assinalando os diversos níveis de listas compostas:

<UL>

<LI>Documentos básicos

<LI>Documentos avançados

<UL>

<LI>formulários
<UL>
<LI>CGI
</UL>

<LI>contadores

<LI>relógios

</UL>

<LI>Detalhes sobre imagens

</UL>

Documentos básicos
Documentos avançados
- formulários
  - CGI
- contadores
- relógios
Detalhes sobre imagens

Segundo o HTML 3.2, essa lista pode ter marcadores diferentes, indicados através do atributo TYPE, que assume os valores CIRCLE, SQUARE e DISC (default):


<UL TYPE=CIRCLE>
<LI>um item
<LI>mais um item
</UL>

um item
mais um item

Cada item também pode ter seu atributo específico:


<UL>
<LI TYPE=DISC>um item
<LI TYPE=CIRCLE>mais um item
<LI TYPE=SQUARE>último item
</UL>

um item
mais um item
último item

Observação 1: Boa parte dos editores HTML (WYSIWYG ou não), insere marcações que não existem em listas. Exemplos típicos são </DD>, </DT> e </LI>. Porém, como essas etiquetas não são reconhecidas pelos browsers, não causam efeito colateral algum nos documentos.

Observação 2: Nestes exemplos, o texto fonte aparece tabulado apenas para efeito de melhor visualização, uma vez que já foi visto que os espaços em branco e tabulações originais não têm efeito no documento final.

Observação 3: Se você não está vendo diferença alguma entre as listas comuns e as que têm atributos de HTML 3.2, isso se deve ao fato de seu browser não estar reconhecendo esses atributos como válidos. Trata-se de um browser de versão antiga. Isso deve ser pensado quando usamos atributos mais recentes: nem todo usuário poderá ver o resultado das novas marcações.

Listas Numeradas

<OL>
<LI>item de uma lista numerada
<LI>item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto
<LI>item de lista numerada
</OL>

item de uma lista numerada
item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto
item de lista numerada

Estas listas não apresentam numeração em formato 1.1, 1.2 etc., quando compostas:

Documentos básicos
Documentos avançados
1. formulários
  1. CGI
  2. contadores
  3. relógios
2. Detalhes sobre imagens
Porém, através do atributo TYPE (HTML 3.2), pode-se lidar com a numeração dos itens: <OL TYPE=I> <LI>Documentos básicos <LI>Documentos avançados <OL TYPE=a> <LI >formulários <OL TYPE=i> <LI>CGI </UL> <LI>contadores <LI>relógios </UL> <LI>Detalhes sobre imagens </UL>
1. Documentos básicos
2. Documentos avançados
  1. formulários
    1. CGI
    2. contadores
    3. relógios
  2. Detalhes sobre imagens
  Ainda segundo HTML 3.2, o atributo START pode indicar o início da numeração da lista:
  
  <OL START=4 TYPE=A>
  <LI>um item
  <LI>outro item
  <LI>mais um item
  </OL>
  1. um item
  2. outro item
  3. mais um item

Listas e “sub-listas”

As listas podem ser aninhadas. Por exemplo:

<DL>
<DT>termo a ser definido
<DD>definição
   <OL>
   <LI>item de uma lista numerada
   <LI>item de uma lista numerada
      <UL>
      <LI>item de uma lista
      </UL>
   <LI>item de uma lista numerada
   </OL>
<DT>termo a ser definido
<DD>definição
</DL>

termo a ser definido

definição

item de uma lista numerada
item de uma lista numerada
- item de uma lista
item de uma lista numerada

termo a ser definido

definição

Introdução à linguagem HTML
Primeiros passos: Atributos gerais de um documento; Cabeçalhos; Separadores; Listas
Formatação de textos e caracteres
Ligações (uso de links)
Inserção de imagens