.jpg)
Seja muito bem-vindo à Academy Code Christ!
🌍 Academy Code Christ está disponível em vários idiomas.
Fique à vontade para usar o tradutor na Barra lateral (Sidebar) e aprender no seu idioma.
📚 Continue sua jornada de aprendizado
%20-%20Copia.png)
A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.
📋 Menus correspondentes:
.png)
💻 Pratique o que você aprende
%20-%20Copia.png)
.png)
.png)
Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.
🟠 Etapa 03
O que você vai aprender nesta aula?
Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.
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.
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
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>
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
➡️ 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
💡 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ê também 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 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
💡 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>
🧠 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.
📘
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.
✨ Conclusão
Agora você domina:
● A criação e estrutura de listas não ordenadas, ordenadas e de definição;
● Como organizar informações hierárquicas e agrupadas;
● Boas práticas semânticas e legibilidade de código.
📚 Continue aprendendo HTML:
🟠 Etapa 01 👉 O que é HTML e como a Web funciona
🟠 Etapa 02 👉 Textos, Parágrafos e Quebras de Linha
🟠 Etapa 03 👉 Você está nessa Aula
🟠 Etapa 04 👉 Imagens, Vídeos e Mídias
🟠 Etapa 05 👉 Links e Navegação no HTML
🟠 Etapa 06 👉 Formulários e Interatividade
🟠 Etapa 07 👉 Estrutura Semântica
🟠 Etapa 08 👉 Tabelas e Organização de Dados
🟠 Etapa 09 👉 Layouts e Responsividade (com CSS introdutório)
🟠 Etapa 10 👉 CSS Moderno: Layout no HTML
.png)
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.
Nossa missão é compartilhar conhecimento e incentivar mais pessoas a descobrir que também podem aprender tecnologia, criar projetos e desenvolver novas habilidades.Todo o conteúdo é disponibilizado gratuitamente, de forma clara, prática e sem enrolação.
Você pode apoiar o projeto se quiser com um café.
.png)
.png)
.png)
Postar um comentário