Bem-vindo(a) ao post no blog.
Se você está começando no HTML, aprender a usar listas é um dos primeiros passos para organizar conteúdos de forma profissional.
Neste guia completo, você vai aprender na prática como criar listas ordenadas, não ordenadas e de definição, além de entender quando usar cada uma delas no desenvolvimento de sites reais.
Ao final deste tutorial, você será capaz de:
✔ Criar listas corretamente com HTML
✔ Organizar conteúdos como menus, tarefas e estruturas de site
✔ Aplicar boas práticas usadas por desenvolvedores
Mesmo que você nunca tenha programado antes, pode acompanhar este passo a passo. Caso queira se aprofundar mais, temos outros conteúdos sobre HTML que vão te ajudar a evoluir ainda mais:
📋 O que são listas em HTML?
As listas organizam informações em sequência, seja em forma de tópicos, etapas, menus ou definições. Elas melhoram a legibilidade, a acessibilidade e o design lógico de um conteúdo.
Há três tipos principais de listas:
1. (unordered list) → Listas não ordenadas – <ul> Quando a ordem não importa, são itens sem sequência (usam marcadores).
2. (ordered list) → Listas ordenadas – <ol> Quando há sequência, são itens numerados tipo (1, 2, 3…).
3. (definition list) → Listas de definição – <dl> Quando for explicar conceitos, usada para pares de termo e descrição.
🧠 Boas Práticas com Listas
Use listas não ordenadas (<ul>) Quando a ordem não importa, como em menus ou listas de itens.
Use listas ordenadas (<ol>) Quando existe uma sequência lógica, como passo a passo.
Use listas de definição (<dl>) para explicar termos e descrições, como glossários, dicionários, FAQ.
Sempre feche todas as tags (</li>, </dl>, etc.). Cuidado com listas aninhadas em excesso afetam a acessibilidade.
👉 Alguns tipos de marcadores:
● disc → bolinha padrão; → <ul style="list-style-type: disc;">
● circle → círculo vazio; → <ul style="list-style-type: circle;">
● square → quadrado sólido; → <ul style="list-style-type: square;">
● none → remove o marcador. → <ul style="list-style-type: none;">
🧾 Listas Não Ordenadas: <ul>
As listas não ordenadas são compostas por itens que não seguem uma sequência numérica específica. Cada item é marcado com um símbolo (•), por padrão. A estrutura é:
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
➡️ Tags usadas:
● <ul> → Define o início e o fim da lista.
● <li> → Representa um item da lista (list item).
➡️ Erros comuns
❌ Esquecer a tag <li>
❌ Não fechar as tags corretamente
❌ Misturar <ul> e <ol> sem necessidade
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
💡 Outro exemplo prático:
<h2>Listas de Compras</h2>
<ul>
<li>Leite</li>
<li>Pão</li>
<li>Frutas</li>
</ul>
🔎 Veja como fica no VScode
Ob: Deixei as tags afastadas para melhor aprendizado.
🔎 Veja como fica o resultado no Live Server
⚙️ Personalizando o marcador (via CSS)
Embora o HTML não tenha controle direto sobre os símbolos, podemos alterar isso usando CSS:
<ul style="list-style-type: square;">
<li>Café</li>
<li>Açúcar</li>
<li>Farinha</li>
</ul>
⚠️ Atenção:
A função <ul style="list-style-type: square;"> é usada para criar uma lista não ordenada (com marcadores), onde os marcadores são exibidos como quadrados sólidos.
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
🧾 Listas Ordenadas: <ol>
As listas ordenadas são vistas em passos sequenciais, onde a ordem tem importância como: tutoriais, rankings ou instruções. Exibindo números, letras ou algarismos romanos.
Exemplo:
<ol>
<li>Planejar o projeto.</li>
<li>Escrever o código HTML.</li>
<li>Aplicar estilos com CSS.</li>
<li>Adicionar interatividade com JavaScript.</li>
</ol>
Resultado:
1. Planejar o projeto.
2. Escrever o código HTML.
3. Aplicar estilos com CSS.
4. Adicionar interatividade com JavaScript.
Você também pode alterar o tipo de numeração. O <ol> possui o atributo type, que muda o formato da contagem.
Exemplo:
type → Tipo
type="1" → Números (padrão) → 1, 2, 3
type="A" → Letras maiúsculas → A, B, C
type="a" → Letras minúsculas → a, b, c
type="I" → Algarismos romanos maiúsculos → I, II, III
type="i" → Algarismos romanos minúsculos → i, ii, iii
🔧 Exemplo prático:
<ol type="A">
<li>Front-end</li>
<li>Back-end</li>
<li>Banco de Dados</li>
</ol>
🔎 VScode (type="A")
🔎 Live Server (type="A")
🔎 VScode (type="a")
🔎 Live Server (type="a")
🔎 VScode (type="I")
🔎 Live Server (type="I")
🎯 Você pode iniciar a contagem de uma lista a partir de um número específico com o atributo start:
Exemplo:
<ol start="5">
<li>Configurar servidor.</li>
<li>Testar funcionalidades.</li>
<li>Deploy final.</li>
</ol>
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
💡 Outro exemplo
<ol>
<li>Passo 1</li>
<li>Passo 2</li>
<li>Passo 3</li>
</ol>
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
💡 Outro exemplo prático:
<h2>Passos para Criar um Site</h2>
<ol>
<li>Planejar o conteúdo.</li>
<li>Escrever o código HTML.</li>
<li>Estilizar com CSS.</li>
<li>Publicar na web.</li>
</ol>
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
🧾 Listas de Definição: <dl>
As listas de definição são diferentes usadas para explicar termos e conceitos. Nelas, usamos três tags distintas: Veja as Tags seu nome e função.
<dl> → Definition list → Delimita toda a lista.
<dt> → Definition term → Marca o termo ou título.
<dd> → Definition description → Explica o termo anterior.
💡 Exemplo prático:
<h2>Glossário de HTML</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language estrutura o conteúdo da web.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets define o estilo visual das páginas.</dd>
<dt>JavaScript</dt>
<dd>Linguagem de programação usada para interatividade.</dd>
</dl>
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
🧾 Listas Aninhadas (Listas Dentro de Listas).
Você pode combinar listas dentro de outras listas — criando hierarquias. Exemplo prático:
<h2>Conteúdos do Curso</h2>
<ul>
<li>HTML
<ul>
<li>Introdução</li>
<li>Formulários</li>
</ul>
</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
💡 Dica:
Evite aninhar listas profundamente, além de dificultar a leitura, torna o código menos acessível.
🧾 Lista de Ícones e Links Sociais
Você também pode usar listas para criar botões sociais ou ícones organizados.
💡 Exemplo:
<ul>
<li><a href="https://instagram.com">Instagram</a></li>
<li><a href="https://facebook.com">Facebook</a></li>
<li><a href="https://twitter.com">Twitter</a></li>
</ul>
📋 Nível mais avançado.
🧭 Criando um Menu Navegável com Listas
Menus em HTML são criados geralmente a partir de listas, dentro de uma <nav>.
💡 Exemplo:
<nav>
<ul>
<li><a href="index.html">Início</a></li>
<li><a href="cursos.html">Cursos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
🔹 Os links servem como itens de navegação.
🔹 Com CSS, você pode transformá-lo em uma barra horizontal ou vertical elegante.
💡 Exemplo:
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li>
<a href="#">Cursos</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
<style>
nav ul {
list-style-type: none; /* remove marcadores */
display: flex;
gap: 20px;
background: #f0f0f0;
padding: 10px;
}
nav li a {
text-decoration: none;
color: #333;
font-weight: bold;
}
nav li a:hover {
color: #0077cc;
}
nav ul {
list-style-type: none; /* remove marcadores */
display: flex;
gap: 20px;
background: #f0f0f0;
padding: 10px;
}
nav li a {
text-decoration: none;
color: #333;
font-weight: bold;
}
nav li a:hover {
color: #0077cc;
}
</style>
💬 Com isso, você tem um menu moderno e horizontal.
Later, pode ser aprimorado para menus responsivos (hambúrguer) no CSS avançado.
🧠 Boas Práticas para Listas e Menus
1. Use listas para conjuntos de itens relacionados (não apenas layout).
2. Sempre mantenha a semântica correta (ul ou ol conforme o contexto).
3. Adicione descrições com títulos (h2, h3, etc.) quando necessário.
4. Use links descritivos (evite “Clique aqui”).
5. Combine menus de lista com tags semânticas como <nav>.
Essa estrutura é semântica e limpa. Com CSS e JavaScript, é possível criar menus dropdown a partir disso.
💻 Exemplo completo: Menu de Navegação Semântico
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Menu com Listas</title>
<style>
nav {
background-color: #222;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
nav ul li ul {
display: none;
position: absolute;
top: 30px;
left: 0;
background: #333;
list-style: none;
padding: 10px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
padding: 5px 0;
}
</style>
</head>
<body>
<header>
<h1>Site de Cursos</h1>
<nav>
<ul>
<li><a href="#">Início</a></li>
<li>
<a href="#">Cursos</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</header>
</body>
</html>
👉 Esse menu é totalmente semântico, organizado e acessível.
Com CSS adicional, pode ser refinado para visualizações móveis e responsivas.
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
💻 Exercício:
1. Um título principal <h1>: Listas em HTML.
○ Crie um arquivo chamado listas_html.html e adicione:
2. Um subtítulo <h2>: Lista de Tarefas da Semana
○ Crie uma lista ordenada (<ol>) com 5 tarefas.
3. Adicione outro subtítulo <h2>: Itens de Estudo
○ Crie uma lista não ordenada (<ul>) com 5 temas de estudo.
4. Por fim, adicione um glossário (<dl>) com os termos:
○ HTML
○ CSS
○ JavaScript
Cada um com sua respectiva descrição do post.
Agora você já sabe como criar e utilizar listas em HTML de forma correta.
Esse é um dos fundamentos mais importantes para construir páginas organizadas e profissionais.
No próximo passo, você pode aprender como estilizar essas listas usando CSS e transformar seus projetos em interfaces mais modernas.
📚 Continue aprendendo HTML:
Como são estruturados os textos em HTML.
Este conteúdo faz parte do Academy Code Christ, um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.
Se este conteúdo te ajudou, você pode apoiar o projeto
Academy Code Christ
com um café ☕.
Pix: antropologiacrista@gmail.com