📘 Aula 13: Listas <ol> e <ul> 📘

Nesta aula, você aprenderá a usar listas ordenadas (<ol>) e listas não-ordenadas (<ul>), além das melhores práticas para organizar itens de forma clara e acessível.

Conceitos Rápidos

• <ul> → lista sem ordem definida (marcadores).
• <ol> → lista com ordem definida (números ou letras).
• Os itens das listas são sempre <li>.
• Use listas para agrupar conteúdos relacionados.

Listas Não-Ordenadas — <ul>

Use quando a ordem dos itens não importa.

• disc: marcador padrão (bolinha)
• circle: marcador circular vazio
• square: marcador quadrado

Listas Ordenadas — <ol>

Use quando a ordem dos itens é importante.

• type: define o estilo do contador (número, letra, romano)
• start: define o número inicial da lista
• reversed: exibe a lista em ordem decrescente

Tipos de Contadores em Listas Ordenadas — <ol>

O atributo type define o estilo dos números ou letras:

• 1 : números arábicos
• A : letras maiúsculas
• a : letras minúsculas
• I : números romanos maiúsculos
• i : números romanos minúsculos

Exemplo prático com type

<ol type="I">
    <li>Primeiro Passo</li>
    <li>Segundo Passo</li>
    <li>Terceiro Passo</li>
</ol>

Outros atributos úteis do <ol>

• start="n": define o número inicial da lista
• reversed: inverte a ordem da contagem

<ol type="A" start="3" reversed>
    <li>Item C</li>
    <li>Item B</li>
    <li>Item A</li>
</ol>

Boas Práticas

• Use <li> apenas dentro de <ul> ou <ol>.
• Evite usar listas apenas para layout; utilize CSS para estilização.
• Leitores de tela interpretam listas, aumentando a acessibilidade.
• Prefira títulos claros e textos descritivos nos itens.

Estruturas em Código

Lista não-ordenada

<ul>
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
</ul>

Lista ordenada

<ol type="A" start="3">
    <li>Terceiro</li>
    <li>Quarto</li>
    <li>Quinto</li>
</ol>

Lista ordenada invertida

<ol type="I" start="5" reversed>
    <li>Quinto</li>
    <li>Quarto</li>
    <li>Terceiro</li>
</ol>

Exemplo visual combinado

<ol type="a">
    <li>Primeiro item</li>
    <li>Segundo item
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Terceiro item</li>
</ol>

Resumo Visual: Listas Ordenadas

Resumo Visual: Listas Não-Ordenadas