📘 Aula 14: Listas Mistas e Definições em HTML 📘

Introdução

O uso de listas em HTML é fundamental para estruturar conteúdos de forma organizada. Elas permitem hierarquizar informações, agrupar conceitos e facilitar a leitura.

Existem três tipos principais de listas:

• Ordenadas (<ol>) – itens numerados.
• Não ordenadas (<ul>) – itens marcados com símbolos.
• De definições (<dl>) – termos e descrições.

1 Listas Ordenadas

São listas numeradas automaticamente pelo navegador. Usam a tag <ol> com itens definidos dentro de <li>.

Exemplo em código:

<ol>
    <li>Ligar o computador</li>
    <li>Abrir o navegador</li>
    <li>Acessar um site</li>
</ol>
    

Exemplo Visual

1. Ligar o computador
2. Abrir o navegador
3. Acessar um site

2 Listas Não Ordenadas

São listas marcadas por símbolos (pontos, quadrados ou círculos). Usam <ul> e <li>.

Exemplo em código:

<ul>
    <li>Arroz</li>
    <li>Feijão</li>
    <li>Carne</li>
</ul>
        

Exemplo Visual

• Arroz
• Feijão
• Carne

3 Listas Aninhadas

Uma lista aninhada é quando criamos uma lista dentro de outra. Muito útil para estruturar informações hierárquicas.

Exemplo em código:

<ul>
    <li>Animais
        <ul>
            <li>Mamíferos
                <ul>
                    <li>Leão</li>
                    <li>Elefante</li>
                </ul>
            </li>
            <li>Aves
                <ul>
                    <li>Águia</li>
                    <li>Papagaio</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
        

Visualização:

• Animais
  • Mamíferos
    • Leão
    • Elefante
  • Aves
    • Águia
    • Papagaio

4 Listas Mistas (Ordenadas + Não Ordenadas)

Uma lista mista combina <ol> e <ul>. São úteis para tópicos principais com subitens não numerados.

Exemplo em código:

<ol>
    <li>Frutas
        <ul>
            <li>Maçã</li>
            <li>Banana</li>
        </ul>
    </li>
    <li>Legumes
        <ul>
            <li>Cenoura</li>
            <li>Batata</li>
        </ul>
    </li>
</ol>
        

Visualização:

1. Frutas
   • Maçã
   • Banana
2. Legumes
   • Cenoura
   • Batata

5 Listas de Definições

As listas de definições (<dl>) são compostas de:

• <dt> – termo (palavra a ser definida).
• <dd> – definição ou explicação do termo.

Exemplo em código:

<dl>
    <dt>HTML</dt>
    <dd>Linguagem de marcação para estruturar páginas web.</dd>

    <dt>CSS</dt>
    <dd>Linguagem de estilos para design visual das páginas.</dd>

    <dt>JavaScript</dt>
    <dd>Linguagem de programação que adiciona interatividade.</dd>
</dl>
        

Visualização:

HTML

Linguagem de marcação para estruturar páginas web.

CSS

Linguagem de estilos para design visual das páginas.

JavaScript

Linguagem de programação que adiciona interatividade.

6 Boas Práticas

• Use listas para informações relacionadas, não apenas para layout.
• Evite listas muito profundas (acima de 3 níveis).
• Prefira frases curtas e objetivas nos itens.
• Mantenha a semântica correta para acessibilidade.
• Use listas de definição para termos técnicos, glossários e FAQs.