Listas em HTML5

Existem dois tipos de listas: as ordenadas (como uma lista de tarefas para fazer em sequência) e as não ordenadas (como uma lista de compras de supermercado).

Listas não ordenadas

Para criar uma lista sem ordenação específica, utilizamos a tag <ul> (ul = unordered list) seguida da tag <li> (li = list item).

Exemplo de código:

                        <ul>
                        <li>Café</li>
                        <li>Açúcar</li>
                        <li>Cebola</li>
                        <li>Batata</li>
                        <li>Etc..</li>
                        </ul>

Exemplo visual:

  • Café
  • Açúcar
  • Cebola
  • Batata
  • Etc..

Obs.: Não é necessário fechar a tag <li> com a tag </li>, ela também pode ser escrita da seguinte forma:

                        <ul>
                        <li>Café
                        <li>Açúcar
                        <li>Cebola
                        <li>Batata
                        <li>Etc..
                        </ul>

Adicionando estilo "Type"

Podemos personalizar a lista trocando o marcador padrão por outros formatos:

  • <ul type="square"> Para quadrado
  • <ul type="circle"> Para círculo
  • <ul type="disc"> Padrão

Exemplo do tipo quadrado:

  • Café
  • Açúcar
  • Cebola
  • Batata
  • Etc..

Listas ordenadas

Para criar uma lista ordenada em HTML, utiliza-se a tag <ol> (ol = ordered list) seguida da tag <li> (li = list item).

Exemplo de código:

                <ol>
                <li>Acordar</li>
                <li>Preparar o Café</li>
                <li>Tomar Banho</li>
                <li>Tomar o café</li>
                <li>Etc..</li>
                </ol>

Exemplo visual:

  1. Acordar
  2. Preparar o Café
  3. Tomar Banho
  4. Tomar o café
  5. Etc..

Adicionando estilo "Type"

Podemos personalizar a lista trocando os numerais por letras ou algarismos romanos:

  • <ol type="I"> Para algarismos romanos maiúsculos
  • <ol type="i"> Para algarismos romanos minúsculos
  • <ol type="A"> Para ordem alfabética maiúscula
  • <ol type="a"> Para ordem alfabética minúscula

Exemplo de algarismos romanos maiúsculos:

  1. Acordar
  2. Preparar o Café
  3. Tomar Banho
  4. Tomar o café
  5. Etc..

Iniciando em outra ordem "Start"

Para começar a lista a partir de outra ordem, utilizamos o atributo "start":

        <ol type="I" start="3">
        <li>Acordar</li>
        <li>Preparar o Café</li>
        <li>Tomar Banho</li>
        <li>Tomar o café</li>
        <li>Etc..</li>
        </ol>

Exemplo visual:

  1. Acordar
  2. Preparar o Café
  3. Tomar Banho
  4. Tomar o café
  5. Etc..

Iniciando em ordem inversa

Para criar uma lista em ordem decrescente, basta adicionar o atributo "reversed" na tag <ol>:

        <ol reversed>
        <li>Acordar</li>
        <li>Preparar o Café</li>
        <li>Tomar Banho</li>
        <li>Tomar o café</li>
        <li>Etc..</li>
        </ol>

Exemplo visual:

  1. Acordar
  2. Preparar o Café
  3. Tomar Banho
  4. Tomar o café
  5. Etc..

Mesclando listas

É possível mesclar listas, criando uma lista dentro de outra. Exemplo:

  1. Módulo
    1. Capítulo
      • Caracteres
      • Parágrafos
      • Quebras de linha
    2. Capítulo
      • Imagens
      • Favicon
    3. Capítulo
      • Semântica
      • Hierarquia de Títulos
    4. Capítulo
      • Formatação de textos

Exemplo de código:

        <ol>
        <li>Módulo</li>
        <ol start="5">
            <li>Capítulo</li>
            <ul>
            <li>Caracteres</li>
            <li>Parágrafos</li>
            <li>Quebras de linha</li>
            </ul>
            <li>Capítulo</li>
            <ul>
            <li>Imagens</li>
            <li>Favicon</li>
            </ul>
        </ol>
        </ol>

Lista de definições

A lista de definição funciona como um dicionário, servindo para descrever o significado de termos. Utilizamos as seguintes tags:

Exemplo de código:

        <dl>
        <dt>Termo</dt>
        <dd>Descrição / significado do termo</dd>
        <dt>Termo</dt>
        <dd>Descrição / significado do termo</dd>
        </dl>

Exemplo visual:

Termo
Descrição / significado do termo
Termo
Descrição / significado do termo

Materiais de apoio

09 - Listas HTML.pdf