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_1ção presentes nas pági nas 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

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

D. Pedro II

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

 

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 entre o resultado da marcação HTML e do Word 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

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

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>

1. item de uma lista numerada
2. 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
3. item de lista numerada

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

1. Documentos básicos
2. 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

</OL>

<LI>contadores

<LI>relógios

</OL>

<LI>Detalhes sobre imagens

</OL>

 

1. Documentos básicos
2. Documentos avançados
   1. formulários
      1. CGI
   2. contadores
   3. relógios
3. 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>

 

4. um item
5. outro item
6. 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

1. item de uma lista numerada
2. item de uma lista numerada
   • item de uma lista
3. item de uma lista numerada

termo a ser definido

definição