- Introdução
- Listas Não Ordenadas (ul)
- Listas Ordenadas (ol)
- Listas de Definição (dl)
- Listas Aninhadas
- Atributos Especiais
- Exemplo Completo
Listas são elementos fundamentais em HTML, usadas para agrupar e organizar informações de forma estruturada. Existem três tipos principais de listas em HTML:
- Listas não ordenadas (
<ul>) - para itens sem ordem específica - Listas ordenadas (
<ol>) - para itens com sequência numérica ou alfabética - Listas de definição (
<dl>) - para pares de termo e descrição
As listas não ordenadas são usadas quando a ordem dos itens não é importante. Cada item é marcado com um símbolo (geralmente um marcador circular).
<ul>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ul><h3>Frutas Preferidas</h3>
<ul>
<li>Maçã</li>
<li>Banana</li>
<li>Laranja</li>
<li>Morango</li>
</ul>Resultado:
- Maçã
- Banana
- Laranja
- Morango
As listas ordenadas são usadas quando a ordem dos itens é importante. Cada item é numerado automaticamente.
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol><h3>Passo a passo para fazer café</h3>
<ol>
<li>Ferva a água</li>
<li>Coloque o pó de café no filtro</li>
<li>Despeje a água quente sobre o pó</li>
<li>Aguarde o café passar</li>
<li>Sirva em uma xícara</li>
</ol>Resultado:
- Ferva a água
- Coloque o pó de café no filtro
- Despeje a água quente sobre o pó
- Aguarde o café passar
- Sirva em uma xícara
As listas de definição são usadas para apresentar pares de termo e descrição, como glossários ou definições.
<dl>
<dt>Termo 1</dt>
<dd>Descrição do termo 1</dd>
<dt>Termo 2</dt>
<dd>Descrição do termo 2</dd>
</dl><h3>Glossário de HTML</h3>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - Linguagem de marcação para criar páginas web</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - Linguagem para estilizar páginas web</dd>
<dt>JavaScript</dt>
<dd>Linguagem de programação para adicionar interatividade às páginas web</dd>
</dl>Resultado:
HTML : HyperText Markup Language - Linguagem de marcação para criar páginas web
CSS : Cascading Style Sheets - Linguagem para estilizar páginas web
JavaScript : Linguagem de programação para adicionar interatividade às páginas web
Você pode criar listas dentro de outras listas para organizar informações hierárquicas.
<h3>Estrutura de um Site</h3>
<ul>
<li>Home
<ul>
<li>Banner principal</li>
<li>Seção de destaques</li>
</ul>
</li>
<li>Sobre
<ul>
<li>História</li>
<li>Equipe</li>
<li>Missão e Visão</li>
</ul>
</li>
<li>Contato</li>
</ul><h3>Plano de Estudos</h3>
<ol>
<li>HTML
<ol>
<li>Tags básicas</li>
<li>Formulários</li>
<li>Tabelas</li>
</ol>
</li>
<li>CSS
<ol>
<li>Seletores</li>
<li>Box model</li>
<li>Flexbox</li>
</ol>
</li>
</ol>O atributo type permite alterar o estilo de numeração:
<!-- Letras maiúsculas -->
<ol type="A">
<li>Primeiro item</li>
<li>Segundo item</li>
</ol>
<!-- Letras minúsculas -->
<ol type="a">
<li>Primeiro item</li>
<li>Segundo item</li>
</ol>
<!-- Números romanos maiúsculos -->
<ol type="I">
<li>Primeiro item</li>
<li>Segundo item</li>
</ol>
<!-- Números romanos minúsculos -->
<ol type="i">
<li>Primeiro item</li>
<li>Segundo item</li>
</ol>O atributo start define o número inicial da lista:
<ol start="5">
<li>Este é o item 5</li>
<li>Este é o item 6</li>
<li>Este é o item 7</li>
</ol>O atributo reversed inverte a ordem da numeração:
<ol reversed>
<li>Terceiro</li>
<li>Segundo</li>
<li>Primeiro</li>
</ol>Para ver todos os tipos de listas em ação, confira o código-fonte abaixou ou arquivo exemplo.html neste repositório. O arquivo contém exemplos práticos de todas as listas abordadas neste tutorial em um documento HTML5 válido.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo Completo de Listas em HTML</title>
</head>
<body>
<h1>Exemplo Completo de Listas em HTML</h1>
<hr>
<h2>1. Lista Não Ordenada (ul) - Frutas Preferidas</h2>
<ul>
<li>Maçã</li>
<li>Banana</li>
<li>Laranja</li>
<li>Morango</li>
<li>Uva</li>
</ul>
<hr>
<h2>2. Lista Ordenada (ol) - Passo a passo para fazer café</h2>
<ol>
<li>Ferva a água</li>
<li>Coloque o pó de café no filtro</li>
<li>Despeje a água quente sobre o pó</li>
<li>Aguarde o café passar</li>
<li>Sirva em uma xícara</li>
</ol>
<hr>
<h2>3. Lista de Definição (dl) - Glossário de HTML</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - Linguagem de marcação para criar páginas web</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - Linguagem para estilizar páginas web</dd>
<dt>JavaScript</dt>
<dd>Linguagem de programação para adicionar interatividade às páginas web</dd>
<dt>Tag</dt>
<dd>Elemento HTML usado para marcar e estruturar o conteúdo de uma página</dd>
</dl>
<hr>
<h2>4. Lista Não Ordenada Aninhada - Estrutura de um Site</h2>
<ul>
<li>Home
<ul>
<li>Banner principal</li>
<li>Seção de destaques</li>
<li>Chamada para ação</li>
</ul>
</li>
<li>Sobre
<ul>
<li>História</li>
<li>Equipe</li>
<li>Missão e Visão</li>
</ul>
</li>
<li>Serviços
<ul>
<li>Consultoria</li>
<li>Desenvolvimento</li>
<li>Suporte</li>
</ul>
</li>
<li>Contato</li>
</ul>
<hr>
<h2>5. Lista Ordenada Aninhada - Plano de Estudos</h2>
<ol>
<li>HTML
<ol>
<li>Tags básicas</li>
<li>Formulários</li>
<li>Tabelas</li>
<li>Listas</li>
</ol>
</li>
<li>CSS
<ol>
<li>Seletores</li>
<li>Box model</li>
<li>Flexbox</li>
<li>Grid</li>
</ol>
</li>
<li>JavaScript
<ol>
<li>Variáveis e tipos</li>
<li>Funções</li>
<li>DOM</li>
<li>Eventos</li>
</ol>
</li>
</ol>
<hr>
<h2>6. Lista Ordenada com Letras Maiúsculas (type="A")</h2>
<ol type="A">
<li>Primeira opção</li>
<li>Segunda opção</li>
<li>Terceira opção</li>
</ol>
<hr>
<h2>7. Lista Ordenada com Letras Minúsculas (type="a")</h2>
<ol type="a">
<li>Item a</li>
<li>Item b</li>
<li>Item c</li>
</ol>
<hr>
<h2>8. Lista Ordenada com Números Romanos (type="I")</h2>
<ol type="I">
<li>Capítulo I</li>
<li>Capítulo II</li>
<li>Capítulo III</li>
<li>Capítulo IV</li>
</ol>
<hr>
<h2>9. Lista Ordenada Iniciando do Número 10 (start="10")</h2>
<ol start="10">
<li>Este é o item 10</li>
<li>Este é o item 11</li>
<li>Este é o item 12</li>
</ol>
<hr>
<h2>10. Lista Ordenada Reversa (reversed)</h2>
<ol reversed>
<li>Terceiro</li>
<li>Segundo</li>
<li>Primeiro</li>
</ol>
<hr>
<h2>11. Lista Mista - Receita de Bolo</h2>
<h3>Ingredientes</h3>
<ul>
<li>3 ovos</li>
<li>2 xícaras de açúcar</li>
<li>2 xícaras de farinha de trigo</li>
<li>1 xícara de leite</li>
<li>1 colher de sopa de fermento</li>
</ul>
<h3>Modo de Preparo</h3>
<ol>
<li>Pré-aqueça o forno a 180°C</li>
<li>Bata os ovos com o açúcar até ficar cremoso</li>
<li>Adicione o leite e misture bem</li>
<li>Acrescente a farinha aos poucos, mexendo sempre</li>
<li>Por último, adicione o fermento e misture delicadamente</li>
<li>Despeje em uma forma untada</li>
<li>Asse por 40 minutos</li>
</ol>
<hr>
<h2>12. Lista Complexa Aninhada - Categorias de Produtos</h2>
<ul>
<li>Eletrônicos
<ul>
<li>Computadores
<ol>
<li>Desktops</li>
<li>Notebooks</li>
<li>Tablets</li>
</ol>
</li>
<li>Celulares
<ol>
<li>Android</li>
<li>iOS</li>
</ol>
</li>
</ul>
</li>
<li>Livros
<ul>
<li>Ficção</li>
<li>Não-ficção</li>
<li>Técnicos
<ol>
<li>Programação</li>
<li>Design</li>
<li>Marketing</li>
</ol>
</li>
</ul>
</li>
</ul>
<hr>
<footer>
<p><strong>Nota:</strong> Este arquivo demonstra o uso de listas em HTML5 sem formatação CSS, mostrando apenas a estrutura semântica do conteúdo.</p>
</footer>
</body>
</html>