Listas em HTML.
Neste post, você vai aprender como usar listas ordenadas, não ordenadas e de definição de forma simples e prática, além de aplicar boas práticas semânticas e estruturais.
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 organizar 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. Listas não ordenadas – <ul> (unordered list), Itens sem sequência (usam marcadores).
2. Listas ordenadas – <ol> (ordered list), Itens numerados (1, 2, 3…).
3. Listas de definição – <dl> (definition list), Usada para pares de termo e descrição.
🧠 Boas Práticas com Listas
1. Use <ul> para listas genéricas (itens sem ordem específica).
2. Use <ol> para etapas sequenciais ou classificatórias.
3. Use <dl> para termos e descrições (glossários, dicionários, FAQ).
4. Sempre feche todas as tags (</li>, </dl>, etc.).
5. Cuidado com listas aninhadas em excesso — afetam a acessibilidade.
👉 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;">
Vamos explorar cada uma delas com exemplos práticos.
🧾 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 é:
<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
💡 Outro exemplo prático:
<h2>Listas de Compras</h2>
<ul>
<li>Leite</li>
<li>Pão</li>
<li>Frutas</li>
</ul>
⚙️ 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:
🔵 Listas Ordenadas: <ol>
As listas ordenadas seguem uma sequência lógica, exibindo números, letras ou algarismos romanos. Estrutura básica:
<li>Passo 1</li>
<li>Passo 2</li>
<li>Passo 3</li>
</ol>
💡 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>
📋 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
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.
<dt> → Definition term → Marca o termo ou título.
<dd> → Definition description → Explica o termo anterior.
<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>
🌐 Submenus (menus suspensos)
Podemos usar listas aninhadas para menus com mais níveis:
💡 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>
Essa estrutura é semântica e limpa. Com CSS e JavaScript, é possível criar menus dropdown a partir disso.
🧭 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.
🧩 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>
🎨 Estilizando Listas e Menus com CSS
<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;
}
</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>.
💻 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.
🔢 Alterando 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:
<li>Front-end</li>
<li>Back-end</li>
<li>Banco de Dados</li>
</ol>
🎯 Começar de um número específico
Você pode iniciar a contagem de uma lista a partir de um número específico com o atributo start:
<ol start="5">
<li>Configurar servidor.</li>
<li>Testar funcionalidades.</li>
<li>Deploy final.</li>
</ol>
<ul>
<li>HTML
<ul>
<li>Introdução</li>
<li>Formulários</li>
</ul>
</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
💡 Dica:
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
💻 Exercício:
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.
Crie uma lista aninhada dentro da sua lista não ordenada, mostrando, por exemplo:
“Linguagens da Web → (HTML, CSS, JS)”.
📚 Continue aprendendo HTML:
Como são estruturados os textos em HTML.
Neste post, você vai aprender a utilizar corretamente títulos, parágrafos, quebras de linha, citações e referências, compreendendo como cada tag contribui para a construção de um conteúdo bem estruturado e acessível.
Comentários
Postar um comentário