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

Próxima lição : Formatação de texto

• Share this on del.icio.us
• Digg this!
• Stumble upon something good? Share it on StumbleUpon
• Share this on Reddit
• Add this to Google Bookmarks
• Tweet This!
• Share this on Facebook
• Share this on Mixx
• Subscribe
• Buzz up!
• Share this on Linkedin
• Submit this to DesignFloat
• Share this on Technorati
• Submit this to Script & Style
• Post this to MySpace
• Share this on Blinklist
• Share this on FriendFeed
• Seed this on Newsvine