Capítulo 3: Navegação e Listas

Navegação e Listas em HTML

Navegação Web: A tag <nav> é usada para criar menus de navegação, permitindo que os usuários se movam facilmente pelo site. Dentro dela, usamos listas para organizar os links do menu.

1. A Tag <nav> - Navegação

A tag <nav> significa navegação e é o elemento semântico usado para criar menus e sistemas de navegação em páginas web.

Como usar a tag <nav>

<nav>
  <!-- Aqui vai o menu de navegação -->
</nav>
                

2. Listas Não Ordenadas - Tag <ul>

Para criar menus de navegação, usamos listas não ordenadas. Pense na lista de compras do supermercado:

Lista de Compras

Feijão
Arroz
Carne
Biscoito

Esta lista não tem uma ordem específica porque todos os itens são igualmente importantes. Por isso é chamada de lista não ordenada.

Tag <ul>

Unordered List (Lista Não Ordenada)

Elemento que contém todos os itens da lista

Tag <li>

List Item (Item da Lista)

Cada item individual dentro da lista

Hierarquia Importante: A tag <li> é um elemento filho da tag <ul>. Isso significa que todas as tags <li> devem estar indentadas (com espaço/Tab) em relação à tag <ul>.

3. Estrutura Básica de Uma Lista

Exemplo: Lista de Compras em HTML

<p>E eu e ela vamos fazer compras no supermercado.</p>
<p>A nossa lista de compras é:</p>
<ul>
  <li>ARROZ</li>
  <li>FEIJÃO</li>
  <li>CARNE</li>
  <li>BISCOITO</li>
</ul>
                

4. Criando um Menu de Navegação

Agora vamos combinar a tag <nav> com listas para criar um menu completo:

Menu de Navegação Completo

<nav>
  <ul>
    <li>Home</li>
    <li>Sobre</li>
    <li>Produtos</li>
    <li>Contato</li>
  </ul>
</nav>
                

Indentação: Representa um espaço vazio à direita (ou esquerda). Use a tecla Tab para indentar o código e deixá-lo organizado e profissional.

🎯 Prepare-se para os Exercícios!

Agora você vai praticar criando:

Exercício 1: Uma lista simples com itens de compras
Exercício 2: Um menu de navegação usando <nav> e listas
Exercício 3: Estrutura completa com header, navegação e conteúdo

Prática: Criando Navegação e Listas

Hora de praticar! Vamos criar listas e menus de navegação funcionais. Observe como o código se organiza hierarquicamente.

Aula Atual: Lista Simples
💡 Dica: Use a tecla Tab para indentar corretamente o código!
⚠️ Importante: As tags html e body não podem ser usadas nos exercícios abaixo.