Listas HTML

Q: Listas podem ser aninhadas? Quantos níveis de profundidade?

Sim, e não há limite. Coloque um <ul> ou <ol> dentro de um <li> para criar sublistas. Cenários comuns：diretórios multinível, menus de árvore, estruturas de esboço. No entanto, recomenda-se manter em 3-4 níveis no máximo — aninhamento profundo prejudica a legibilidade e exibe mal em dispositivos móveis. Você pode misturar <ul> e <ol> ao aninhar, como externo ordenado com interno não ordenado.

Listas organizam conteúdos relacionados. O HTML oferece três tipos: listas não ordenadas (com marcadores), listas ordenadas (numeradas) e listas de definição (termo + descrição).

Listas Não Ordenadas

<ul> (unordered list) combinada com <li> (list item) cria listas com marcadores — ideais para menus, categorias, listas de recursos e outros conteúdos sem uma sequência obrigatória:

Exemplo

HTML

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

▶ Experimente

Listas Ordenadas

<ol> (ordered list) gera itens numerados — ideais para instruções passo a passo, rankings e guias procedurais:

Exemplo

HTML

<ol>
<li>Abra seu editor</li>
<li>Escreva algum HTML</li>
<li>Salve como um arquivo .html</li>
<li>Abra no navegador</li>
</ol>

▶ Experimente

📌 Listas Aninhadas: As listas podem ser aninhadas umas dentro das outras — coloque uma <ul> ou <ol> dentro de um <li> para criar hierarquias de vários níveis. Os menus de navegação com dropdown de vários níveis são construídos usando listas aninhadas.

Listas de Definição

<dl> (definition list) contém uma série de <dt> (termos) e <dd> (descrições), ideais para glossários, metadados e formatos de perguntas e respostas:

Exemplo

HTML

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, o esqueleto das páginas web</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, controla a aparência das páginas web</dd>
</dl>

▶ Experimente

Listas Expansíveis

<details> e <summary> são tags HTML5 para criar blocos de conteúdo expansíveis/recolhíveis — comumente usadas em seções de FAQ e menus de documentação recolhíveis. Clique no título <summary> para alternar o estado de expansão/recolhimento:

Exemplo

HTML

<details>
<summary>O que é HTML?</summary>
<p>HTML é a HyperText Markup Language usada para criar páginas web.</p>
</details>

<details open>
<summary>O que é CSS?</summary>
<p>CSS controla o estilo e o layout das páginas web.</p>
</details>

▶ Experimente

📌 O Atributo open: Adicionar o atributo open ao <details> faz com que o conteúdo seja expandido por padrão (com open = expandido; sem = recolhido). Os navegadores adicionam automaticamente uma seta de expandir/recolher ao <summary> — sem necessidade de CSS ou JavaScript extras.

❓ Perguntas Frequentes

P Qual é a diferença entre <ul> e <ol>? Quando uso cada um?

R <ul> é uma lista não ordenada — marcada com bullets, quadrados ou outros símbolos — adequada para itens sem sequência, como menus de navegação, listas de recursos ou pontos-chave. <ol> é uma lista ordenada — marcada com números ou letras — adequada para itens com ordem específica, como instruções passo a passo, rankings ou esboços de tutoriais. A escolha depende se os itens têm uma relação sequencial.

P Listas podem ser aninhadas? Quantos níveis de profundidade?

R Sim, e não há limite. Coloque um <ul> ou <ol> dentro de um <li> para criar sublistas. Cenários comuns：diretórios multinível, menus de árvore, estruturas de esboço. No entanto, recomenda-se manter em 3-4 níveis no máximo — aninhamento profundo prejudica a legibilidade e exibe mal em dispositivos móveis. Você pode misturar <ul> e <ol> ao aninhar, como externo ordenado com interno não ordenado.

P O que é uma lista de definição <dl>? Como difere de <ul>/<ol>?

R <dl> (Lista de Definição) é projetada para pares termo-descrição, composta por <dt> (termo) e <dd> (descrição). Cenários típicos：FAQs, glossários, especificações de produtos, metadados. <ul>/<ol> são coleções de "itens de lista", enquanto <dl> é uma coleção de "pares chave-valor". No HTML5, <dl> também pode ser usado para informações de autor, detalhes de contato e outros metadados.

📖 Resumo

<ul> lista não ordenada + <li> itens da lista (marcadores)
<ol> lista ordenada + <li> itens da lista (numerados)
<dl> lista de definição + <dt> termo + <dd> descrição
<details> + <summary> lista expansível; o atributo open controla a expansão padrão
Listas podem ser aninhadas para criar estruturas de vários níveis

📝 Atividades

Construa um menu: Use uma lista não ordenada para criar um menu de navegação de site com links para Início, Produtos, Sobre Nós e Contato.
Listas aninhadas: Crie uma lista aninhada: uma lista ordenada externa (passos) com uma lista não ordenada interna (observações para cada passo).