Listas não ordenadas: ul e li

Crie listas com marcadores, como uma lista de compras onde a ordem dos itens não importa.

Listas estão em todo lugar na web — menus de navegação, ingredientes de receitas, funcionalidades de um produto, itens de um carrinho de compras. Sempre que você tem um conjunto de itens onde a ordem não importa, a ferramenta certa é a lista não ordenada.

A tag ul: unordered list

ul vem de unordered list — lista não ordenada. Ela cria um agrupamento de itens onde a sequência não tem significado semântico: trocar a posição dos itens não altera o sentido da lista.

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

Por padrão, o navegador renderiza cada item com um marcador — geralmente um ponto preto (•) — e um recuo à esquerda:

• HTML
• CSS
• JavaScript

A tag li: list item

li vem de list item — item de lista. É o único elemento filho válido direto de <ul> — e também de <ol>, que você verá na próxima lição.

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

Cada <li> pode conter qualquer tipo de conteúdo: texto, links, imagens, outras listas, parágrafos — qualquer elemento HTML inline ou de bloco.

Quando usar ul

Use <ul> sempre que os itens forem um conjunto sem hierarquia de ordem. Alguns exemplos reais:

<!-- ✅ Ingredientes de receita — a ordem não altera o resultado -->
<h2>Ingredientes</h2>
<ul>
  <li>2 xícaras de farinha de trigo</li>
  <li>1 colher de fermento</li>
  <li>3 ovos</li>
  <li>200 ml de leite</li>
  <li>1 pitada de sal</li>
</ul>

<!-- ✅ Funcionalidades de um produto -->
<h2>O que você vai aprender</h2>
<ul>
  <li>Estrutura de documentos HTML</li>
  <li>Estilização com CSS</li>
  <li>Interatividade com JavaScript</li>
  <li>Boas práticas de acessibilidade</li>
</ul>

<!-- ✅ Lista de tecnologias -->
<h2>Tecnologias usadas</h2>
<ul>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>JavaScript ES2026</li>
  <li>Git</li>
</ul>

Itens de lista com conteúdo rico

O <li> não precisa conter apenas texto simples — ele pode ter links, imagens, parágrafos e outros elementos:

Itens com links

<!-- ✅ Menu de navegação — o caso de uso mais comum -->
<nav aria-label="Menu principal">
  <ul>
    <li><a href="/">Início</a></li>
    <li><a href="/sobre">Sobre</a></li>
    <li><a href="/projetos">Projetos</a></li>
    <li><a href="/contato">Contato</a></li>
  </ul>
</nav>

💡 Menus de navegação são estruturalmente listas não ordenadas — os itens do menu são um conjunto de opções sem hierarquia de ordem entre si. Envolver o <ul> com <nav> adiciona semântica de navegação ao bloco.

Itens com múltiplas linhas

<ul>
  <li>
    <strong>HTML</strong>
    <p>A linguagem de marcação que estrutura o conteúdo
    de todas as páginas da web.</p>
  </li>
  <li>
    <strong>CSS</strong>
    <p>A linguagem de estilos que define a aparência
    visual de elementos HTML.</p>
  </li>
  <li>
    <strong>JavaScript</strong>
    <p>A linguagem de programação que adiciona
    comportamento e interatividade às páginas.</p>
  </li>
</ul>

Listas aninhadas

Uma lista pode conter outra lista — criando uma estrutura hierárquica de itens e subitens:

<ul>
  <li>
    Front-end
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>
    Back-end
    <ul>
      <li>Node.js</li>
      <li>Python</li>
      <li>PHP</li>
    </ul>
  </li>
  <li>
    Banco de dados
    <ul>
      <li>PostgreSQL</li>
      <li>MongoDB</li>
    </ul>
  </li>
</ul>

O resultado visual padrão usa marcadores diferentes para cada nível de aninhamento:

• Front-end
    ◦ HTML
    ◦ CSS
    ◦ JavaScript
• Back-end
    ◦ Node.js
    ◦ Python
    ◦ PHP
• Banco de dados
    ◦ PostgreSQL
    ◦ MongoDB

💡 A lista aninhada deve ficar dentro do <li> pai — não depois do fechamento do </li>:

<!-- ✅ Correto: lista aninhada dentro do li -->
<li>
  Front-end
  <ul>
    <li>HTML</li>
  </ul>
</li>

<!-- ❌ Errado: lista aninhada fora do li -->
<li>Front-end</li>
<ul>
  <li>HTML</li>
</ul>

Semântica vs. aparência: o erro mais comum

O erro mais frequente com listas é usar <ul> ou <li> por razões visuais — para obter o recuo ou os marcadores — em vez de por razões semânticas:

<!-- ❌ Usando ul só para ter marcadores visuais
     quando o conteúdo não é uma lista -->
<ul>
  <li>Bem-vindo ao nosso site.</li>
  <li>Aqui você encontra tutoriais.</li>
  <li>Aprenda no seu ritmo.</li>
</ul>

<!-- ✅ Esse conteúdo é uma sequência de parágrafos,
     não uma lista -->
<p>Bem-vindo ao nosso site.</p>
<p>Aqui você encontra tutoriais.</p>
<p>Aprenda no seu ritmo.</p>

A pergunta que define o uso correto é: "Esse conteúdo é uma coleção de itens relacionados?" Se sim, <ul>. Se não, use o elemento semântico correto.

Boas práticas de estrutura

O único filho direto válido de ul é li

<!-- ❌ Texto ou outros elementos diretamente em ul -->
<ul>
  Texto solto
  <p>Parágrafo dentro de ul</p>
  <li>Item correto</li>
</ul>

<!-- ✅ Apenas li como filho direto -->
<ul>
  <li>Texto dentro do li</li>
  <li><p>Parágrafo dentro do li</p></li>
</ul>

Não use ul apenas para remover marcadores

<!-- ❌ Usando ul apenas para agrupar sem semântica de lista -->
<ul style="list-style: none">
  <div>Conteúdo 1</div>
  <div>Conteúdo 2</div>
</ul>

<!-- ✅ Para agrupar sem semântica de lista, use div ou section -->
<div>
  <div>Conteúdo 1</div>
  <div>Conteúdo 2</div>
</div>

ul e acessibilidade

Leitores de tela identificam <ul> e anunciam:

  • O tipo do elemento: "lista"
  • A quantidade de itens: "3 itens"
  • Cada item ao ser navegado
<!-- O leitor de tela anuncia:
     "lista, 3 itens"
     "ponto, HTML"
     "ponto, CSS"
     "ponto, JavaScript"
     "fim da lista" -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

⚠️ Alguns navegadores — especialmente o Safari — removem a semântica de lista quando list-style: none é aplicado via CSS. Se a lista mantém significado semântico após ter os marcadores removidos, adicione role="list" ao <ul> para garantir que leitores de tela continuem anunciando-a corretamente:

<!-- ✅ Garantindo semântica com list-style: none -->
<ul role="list" style="list-style: none">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Exemplo completo: card de produto

<article>

  <h2>Plano Pro — Semeando Devs</h2>

  <p>Tudo que você precisa para se tornar desenvolvedor
  front-end do zero.</p>

  <h3>O que está incluído:</h3>

  <ul>
    <li>Acesso a todos os módulos do curso</li>
    <li>Projetos práticos com feedback</li>
    <li>Certificado de conclusão</li>
    <li>Comunidade exclusiva de alunos</li>
    <li>Atualizações vitalícias do conteúdo</li>
  </ul>

  <h3>Tecnologias abordadas:</h3>

  <ul>
    <li>
      HTML5 semântico
      <ul>
        <li>Estrutura de documentos</li>
        <li>Formulários acessíveis</li>
        <li>Mídia nativa</li>
      </ul>
    </li>
    <li>
      CSS3 moderno
      <ul>
        <li>Flexbox e Grid</li>
        <li>Animações e transições</li>
        <li>Design responsivo</li>
      </ul>
    </li>
    <li>
      JavaScript
      <ul>
        <li>Manipulação do DOM</li>
        <li>Eventos e formulários</li>
        <li>Fetch API</li>
      </ul>
    </li>
  </ul>

</article>

Resumindo

  • <ul> → unordered list — lista de itens sem hierarquia de ordem entre eles
  • <li> → list item — cada item da lista
  • Use <ul> quando a troca de posição dos itens não altera o significado do conjunto
  • O único filho direto válido de <ul> é <li>
  • Listas podem ser aninhadas — a lista filha fica dentro do <li> pai
  • Não use <ul> apenas por razões visuais — use quando o conteúdo é semanticamente uma lista
  • Menus de navegação são listas <ul> dentro de <nav>
  • Se remover list-style com CSS, adicione role="list" para preservar a semântica