0Pricing
HTML Academy · Aula

Listas não ordenadas: ul e li

Criar listas com marcadores utilizando os elementos ul e li.

Listas não ordenadas: ul e li é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

O que é uma lista não ordenada?

Uma lista não ordenada exibe itens com marcadores points — a ordem não importa:

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

O elemento ul

O elemento <ul> (lista não ordenada) envolve a lista. Somente elements <li> devem ser filhos diretos:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
<!-- ul = unordered list (bullet points by default) -->
<!-- li = list item -->
<!-- Never put text directly inside ul without li -->

Estilizando marcadores com CSS

Controle os marcadores da lista com CSS:

ul {
  list-style-type: disc;       /* default: filled circle */
  /* circle, square, none */
}

/* Custom bullet with ::before */
ul li::before {
  content: '→ ';
  color: blue;
}

/* Remove all list styling: */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

Navegação como ul

Menus de navegação são semanticamente uma lista de links:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

li pode conter qualquer conteúdo

Os itens de lista podem conter qualquer conteúdo de fluxo:

<ul>
  <li>
    <strong>HTML</strong>
    <p>The structure of the web.</p>
  </li>
  <li>
    <strong>CSS</strong>
    <p>The presentation layer.</p>
  </li>
</ul>

Listas em linha

Exiba os itens da lista horizontalmente com CSS:

<ul class="inline-list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>

<!-- CSS: -->
<!--
.inline-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
-->

Usos semânticos de ul

Usos semânticos comuns para listas não ordenadas:

  • Menus de navegação
  • Listas de recursos
  • Nuvens de etiquetas
  • Links relacionados
  • Listas de ingredientes em receitas

ul versus p para vários itens

Quando você tem vários itens relacionados, uma lista é semanticamente melhor do que parágrafos separados:

<!-- Bad: items that are actually a list -->
<p>- HTML</p>
<p>- CSS</p>
<p>- JavaScript</p>

<!-- Good: -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Marcadores de lista com list-style-image

Use uma imagem personalizada como marcador da lista:

ul {
  list-style-image: url('/icons/check.svg');
}

/* More reliable: use background-image on li::before */
ul li {
  list-style: none;
  padding-left: 1.5rem;
  background: url('/icons/check.svg') no-repeat left center;
  background-size: 1rem;
}

Abreviação list-style

A abreviação list-style define o tipo, a posição e a imagem:

ul {
  list-style: square inside;    /* type + position */
  list-style: none;             /* remove bullets */
}

/* list-style-position: inside vs outside */
ul {
  list-style-position: inside;  /* bullet inside padding box */
  /* outside = default, bullet outside text block */
}

Acessibilidade

Observações de acessibilidade para listas:

  • Os leitores de tela anunciam o tipo da lista e a quantidade de itens
  • Usar list-style: none pode fazer com que alguns leitores de tela não a anunciem como uma lista — adicione role="list" para preservar a semântica
<ul style="list-style: none" role="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Verificação rápida

Qual é o único elemento filho direto válido de ul?

Recapitulação: listas não ordenadas

Fundamentos das listas não ordenadas:

  • <ul> envolve uma lista na qual a ordem não importa
  • <li> é o único filho direto válido
  • Marcador padrão: disc; altere-o com list-style-type
  • Menus de navegação são semanticamente listas de links em <ul>
  • Adicione role="list" se remover os marcadores com CSS

Perguntas Frequentes

A aula “Listas não ordenadas: ul e li” é grátis?

Sim — o texto completo de “Listas não ordenadas: ul e li” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Listas não ordenadas: ul e li”?

Criar listas com marcadores utilizando os elementos ul e li. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Listas não ordenadas: ul e li”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Listas não ordenadas: ul e li
  2. Listas ordenadas: ol, start, reversed e type
  3. Listas de descrição: dl, dt e dd
  4. Listas aninhadas e estilos de listas
← Voltar para HTML Academy