Listas em HTML

1.1 Tipos de listas

Listas em HTML são uma ferramenta importante para organizar e estruturar informações. Elas permitem exibir elementos com números ou com pontos em negrito (marcadores). Vamos analisar com mais detalhes cada um dos elementos de listas no HTML: <ul>, <ol>, e <li>.

Listas não ordenadas (<ul>)

A tag <ul> é usada para criar listas não ordenadas (com marcadores). Os elementos da lista são exibidos com marcadores (pontos, círculos, quadrados).

Exemplo:

    
      <ul>
        <li>Primeiro item da lista</li>
        <li>Segundo item da lista</li>
        <li>Terceiro item da lista</li>
      </ul>
    
  

Listas ordenadas (<ol>)

A tag <ol> é usada para criar listas ordenadas. Os elementos da lista são exibidos com números ou letras.

Exemplo:

    
      <ol>
        <li>Primeiro item da lista</li>
        <li>Segundo item da lista</li>
        <li>Terceiro item da lista</li>
      </ol>
    
  

1.2 Elementos de lista <li>

A tag <li> é usada para indicar cada elemento da lista, seja ela não ordenada ou ordenada. Ela deve sempre estar dentro de <ul> ou <ol>.

Como lembrar facilmente essas tags:

• Ordered List – lista ordenada
• Unordered List – lista não ordenada
• List Item – item da lista

Atributo type

Este atributo pode ser usado dentro de <ul> e <ol> para alterar o tipo de marcador ou numeração. Por exemplo, para <ol> pode-se usar os valores "1", "A", "a", "I", "i", e para <ul> - "disc", "circle", "square".

Exemplo de alteração do tipo de marcador para <ul>:

    
      <ul type="square">
        <li>Primeiro item da lista</li>
        <li>Segundo item da lista</li>
      </ul>
    
  

Exemplo de alteração do tipo de numeração para <ol>:

    
      <ol type="A">
        <li>Primeiro item da lista</li>
        <li>Segundo item da lista</li>
      </ol>
    
  

Atributo start:

Este atributo é usado apenas com <ol> para indicar o número inicial da numeração.

Por exemplo:

    
      <ol start="5">
        <li>Quinto item da lista</li>
        <li>Sexto item da lista</li>
      </ol>
    
  

Listas aninhadas

Listas podem ser aninhadas, permitindo criar estruturas mais complexas.

Exemplo de lista aninhada:

    
      <ul>
        <li>Primeiro item da lista</li>
          <ul type="circle">
            <li>Primeiro item aninhado</li>
            <li>Segundo item aninhado</li>
          </ul>
        <li>Segundo item da lista</li>
        <li>Terceiro item da lista</li>
      </ul>
    
  

1.3 Estilização de listas

Listas podem ser estilizadas com CSS, alterando a cor dos marcadores, tipos de marcadores e espaçamentos.

Exemplo de estilização:

    
      ul.custom-list {
        list-style-type: katakana; /* Sílabas japonesas */
        color: blue; /* Cor do texto */
      }

      ol.custom-list {
        list-style-type: hiragana-iroha; /* Sistema japonês de ordenação */
        color: green; /* Cor do texto */
      }
    
  

    
      <ul class="custom-list">
        <li>Primeiro item da lista</li>
        <li>Segundo item da lista</li>
      </ul>

      <ol class="custom-list">
        <li>Primeiro item da lista</li>
        <li>Segundo item da lista</li>
      </ol>
    
  

Assim, o uso de <ul>, <ol>, e <li> ajuda a estruturar o conteúdo e melhora a legibilidade em páginas da web.