Lição 30 de 50

Elementos Semânticos no HTML5: Header e Nav | Web Academy

Em qualquer aplicação ou portal na internet, o cabeçalho e a barra de navegação são os primeiros componentes com os quais os usuários e os motores de busca interagem. No HTML5, os elementos semânticos <header> e <nav> vieram substituir os arcaicos <div id="topo"> e <div class="menu">. Compreender a profundidade dessas duas tags — quando usá-las no escopo global versus escopo de artigo, como estruturar menus com listas acessíveis e como gerenciar páginas ativas com aria-current="page" — é fundamental para criar interfaces profissionais e acessíveis.

📑 Índice do Conteúdo

1. O Elemento <header>: Escopo Global vs Escopo Seccional

Um dos maiores equívocos de quem estuda HTML5 é acreditar que só pode existir um único <header> por documento. Na verdade, o elemento <header> representa um contêiner introdutório para o elemento pai mais próximo e pode ser utilizado em dois escopos distintos:

Quando o <header> é posicionado como filho direto de <body> (sem estar contido dentro de um <article> ou <section>), ele representa o cabeçalho mestre de todo o portal. Os navegadores atribuem automaticamente a ele o marco de acessibilidade role="banner":

HTML5 — Cabeçalho Global do Portal
header-global.html

HTML 10 linhas

<body>
    <!-- Cabeçalho Global do Site -->
    <header class="topo-site">
        <a href="/" class="logo">Web-ZoneWare</a>
        <nav aria-label="Menu Principal">
            <!-- Links do Menu -->
        </nav>
    </header>
    ...
</body>

<body>
<!-- Cabeçalho Global do Site -->
<header class="topo-site">
<a href="/" class="logo">Web-ZoneWare</a>
<nav aria-label="Menu Principal">
<!-- Links do Menu -->
</nav>
</header>
...
</body>

2. Escopo de Artigo ou Seção

Você pode (e deve) utilizar um <header> dentro de um <article> ou <section> para envolver o título do artigo, a foto do autor, a data de publicação (<time>) e a categoria. Nesse contexto, ele não é um banner global, mas sim o cabeçalho daquele conteúdo específico:

HTML5 — Cabeçalho Seccional de um Artigo
header-artigo.html

HTML 13 linhas

<article>
    <header class="cabecalho-post">
        <h1>Como Construir Menus Acessíveis no HTML5</h1>
        <div class="meta-dados">
            <span>Por Flavio</span> &bull; 
            <time datetime="2026-10-21">21 de Outubro de 2026</time>
        </div>
    </header>
 
    <section>
        <p>Corpo do artigo...</p>
    </section>
</article>

<article>
<header class="cabecalho-post">
<h1>Como Construir Menus Acessíveis no HTML5</h1>
<div class="meta-dados">
<span>Por Flavio</span> &bull; 
<time datetime="2026-10-21">21 de Outubro de 2026</time>
</div>
</header>
<section>
<p>Corpo do artigo...</p>
</section>
</article>

2. O Elemento <nav>: O Que Deve e o Que NÃO Deve Estar Nele

O elemento <nav> é reservado exclusivamente para seções principais de navegação que contêm blocos de hiperlinks vitais para o usuário:

DEVE Estar Dentro de <nav> ✅	NÃO DEVE Estar Dentro de <nav> ❌
Menu de navegação principal do topo do site.	Links secundários de termos de uso e privacidade (pertencem a `<footer>`).
Menu de categorias de produtos de um e-commerce.	Ícones e links para redes sociais (pertencem a `<footer>` ou `<aside>`).
Trilha de migalhas de pão (Breadcrumbs).	Grupos de botões de comando (como “Salvar”, “Excluir” ou “Imprimir”).
Paginação de artigos (1, 2, 3… Próximo).	Links esparsos soltos no meio de um parágrafo de texto normal.
Índice interno de sumário (Table of Contents).	Formulário de login de usuário (pertence a `<form>`).

3. Por Que Menus Devem Ser Listas (<ul><li>)?

Muitos iniciantes colocam links <a> soltos dentro de <nav>. Embora o CSS consiga estilizá-los, essa prática destrói a acessibilidade para pessoas cegas.

Quando você envolve os links em uma lista não-ordenada (<ul><li>), o leitor de tela anuncia exatamente: “Navegação, lista com 4 itens”. O usuário cego sabe de antemão quantos links existem no menu e consegue saltar de item em item pelo teclado com facilidade.

💡

Estrutura Padrão Recomendada pela WCAG:

<nav aria-label="Menu Principal"><ul><li><a href="...">Item</a></li></ul></nav>

4. O Poder do Atributo aria-current=”page”

No desenvolvimento antigo, para destacar visualmente a página em que o usuário estava navegando, criava-se uma classe como class="ativo" ou class="current". O problema é que leitores de tela não entendem classes CSS visuais.

O W3C padronizou o atributo aria-current="page". Ele informa ao software de acessibilidade: “Este é o link da página atual em exibição”, enquanto você pode estilizar o elemento no CSS com um seletor limpo e elegante:

CSS3 — Estilizando o Link Ativo Sem Classes Redundantes
nav-active.css

CSS 6 linhas

/* Estilo do item ativo selecionado pelo atributo ARIA */
nav.menu-topo a[aria-current="page"] {
    color: #38bdf8;
    border-bottom: 2px solid #38bdf8;
    font-weight: 700;
}

/* Estilo do item ativo selecionado pelo atributo ARIA */
nav.menu-topo a[aria-current="page"] {
color: #38bdf8;
border-bottom: 2px solid #38bdf8;
font-weight: 700;
}

5. Múltiplos <nav> na Mesma Página e o Uso Obrigatório de aria-label

Se uma página possuir dois ou mais elementos <nav> (por exemplo, o menu do topo, a trilha de breadcrumbs e a paginação), o usuário de leitor de tela ouvirá repetidamente: “Navegação… Navegação… Navegação…” sem saber qual é qual.

Para resolver isso, sempre diferencie cada <nav> com o atributo aria-label:

HTML5 — Diferenciando Múltiplas Navegações com aria-label
multiplos-nav.html

HTML 8 linhas

<!-- 1. Navegação Principal no Topo -->
<nav aria-label="Menu Principal">...</nav>
 
<!-- 2. Trilha de Navegação (Breadcrumb) -->
<nav aria-label="Trilha de Navegação">...</nav>
 
<!-- 3. Paginação no Rodapé da Lista -->
<nav aria-label="Paginação de Aulas">...</nav>

<!-- 1. Navegação Principal no Topo -->
<nav aria-label="Menu Principal">...</nav>
<!-- 2. Trilha de Navegação (Breadcrumb) -->
<nav aria-label="Trilha de Navegação">...</nav>
<!-- 3. Paginação no Rodapé da Lista -->
<nav aria-label="Paginação de Aulas">...</nav>

6. Exemplo Prático: Cabeçalho Moderno com Glassmorphism no Playground IDE

O exemplo abaixo demonstra a montagem de um cabeçalho completo, responsivo e semântico, com efeito de vidro fosco (Glassmorphism), menu acessível e indicador aria-current="page":

HTML5 + CSS3 — Cabeçalho Fixo Moderno e Acessível
cabecalho-moderno.html

HTML 133 linhas

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cabeçalho Semântico Web Academy</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: #0f172a;
            color: #f8fafc;
            margin: 0;
            padding-top: 80px; /* Compensa o header fixo */
        }
 
        /* Cabeçalho Sticky com Efeito Glassmorphism */
        header.topo-fixo {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 70px;
            background: rgba(15, 23, 42, 0.75);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 32px;
            z-index: 1000;
        }
 
        .logo-box a {
            color: #f8fafc;
            text-decoration: none;
            font-size: 20px;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 8px;
        }
 
        .logo-box span {
            color: #38bdf8;
        }
 
        /* Navegação Semântica com Lista */
        nav.nav-principal ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 24px;
            align-items: center;
        }
 
        nav.nav-principal a {
            color: #94a3b8;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            padding: 8px 12px;
            border-radius: 6px;
            transition: all 0.2s ease;
        }
 
        nav.nav-principal a:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.05);
        }
 
        /* Página Ativa selecionada via ARIA */
        nav.nav-principal a[aria-current="page"] {
            color: #38bdf8;
            background: rgba(56, 189, 248, 0.1);
        }
 
        .btn-cta {
            background: #0284c7;
            color: #ffffff !important;
            padding: 8px 18px !important;
            border-radius: 8px !important;
            font-weight: 700 !important;
        }
 
        .btn-cta:hover {
            background: #0369a1 !important;
            box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4);
        }
 
        .conteudo-demo {
            max-width: 800px;
            margin: 40px auto;
            padding: 0 20px;
            line-height: 1.7;
        }
    </style>
</head>
<body>
 
    <!-- Cabeçalho Global (Landmark Banner) -->
    <header class="topo-fixo">
        <div class="logo-box">
            <a href="#">Web-Zone<span>Ware</span></a>
        </div>
 
        <!-- Navegação Primária Semântica -->
        <nav class="nav-principal" aria-label="Menu Principal">
            <ul>
                <li><a href="#">Início</a></li>
                <li><a href="#" aria-current="page">Web Academy</a></li>
                <li><a href="#">Ferramentas</a></li>
                <li><a href="#">Comunidade</a></li>
                <li><a href="#" class="btn-cta">Playground IDE</a></li>
            </ul>
        </nav>
    </header>
 
    <main class="conteudo-demo">
        <article>
            <header>
                <h1 style="color: #38bdf8; font-size: 32px;">Cabeçalhos e Navegação Semântica</h1>
                <p style="color: #64748b;">Exemplo ao vivo da Lição 30 da Web Academy.</p>
            </header>
            <section>
                <p>Role a página para observar o efeito de vidro fosco (glassmorphism) do cabeçalho fixo no topo. A estrutura é 100% acessível a leitores de tela e cumpre todas as diretrizes da WCAG 2.2.</p>
            </section>
        </article>
    </main>
 
</body>
</html>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cabeçalho Semântico Web Academy</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: #0f172a;
color: #f8fafc;
margin: 0;
padding-top: 80px; /* Compensa o header fixo */
}
/* Cabeçalho Sticky com Efeito Glassmorphism */
header.topo-fixo {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
z-index: 1000;
}
.logo-box a {
color: #f8fafc;
text-decoration: none;
font-size: 20px;
font-weight: 800;
display: flex;
align-items: center;
gap: 8px;
}
.logo-box span {
color: #38bdf8;
}
/* Navegação Semântica com Lista */
nav.nav-principal ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 24px;
align-items: center;
}
nav.nav-principal a {
color: #94a3b8;
text-decoration: none;
font-size: 14px;
font-weight: 600;
padding: 8px 12px;
border-radius: 6px;
transition: all 0.2s ease;
}
nav.nav-principal a:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.05);
}
/* Página Ativa selecionada via ARIA */
nav.nav-principal a[aria-current="page"] {
color: #38bdf8;
background: rgba(56, 189, 248, 0.1);
}
.btn-cta {
background: #0284c7;
color: #ffffff !important;
padding: 8px 18px !important;
border-radius: 8px !important;
font-weight: 700 !important;
}
.btn-cta:hover {
background: #0369a1 !important;
box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4);
}
.conteudo-demo {
max-width: 800px;
margin: 40px auto;
padding: 0 20px;
line-height: 1.7;
}
</style>
</head>
<body>
<!-- Cabeçalho Global (Landmark Banner) -->
<header class="topo-fixo">
<div class="logo-box">
<a href="#">Web-Zone<span>Ware</span></a>
</div>
<!-- Navegação Primária Semântica -->
<nav class="nav-principal" aria-label="Menu Principal">
<ul>
<li><a href="#">Início</a></li>
<li><a href="#" aria-current="page">Web Academy</a></li>
<li><a href="#">Ferramentas</a></li>
<li><a href="#">Comunidade</a></li>
<li><a href="#" class="btn-cta">Playground IDE</a></li>
</ul>
</nav>
</header>
<main class="conteudo-demo">
<article>
<header>
<h1 style="color: #38bdf8; font-size: 32px;">Cabeçalhos e Navegação Semântica</h1>
<p style="color: #64748b;">Exemplo ao vivo da Lição 30 da Web Academy.</p>
</header>
<section>
<p>Role a página para observar o efeito de vidro fosco (glassmorphism) do cabeçalho fixo no topo. A estrutura é 100% acessível a leitores de tela e cumpre todas as diretrizes da WCAG 2.2.</p>
</section>
</article>
</main>
</body>
</html>

Teste e personalize este cabeçalho responsivo diretamente no Playground:
⚡ Testar no Playground IDE

7. Boas Práticas e Erros Comuns a Evitar

Nunca Aninhe <header> Dentro de Outro <header>: É uma infração direta à especificação do W3C.
Não Use <nav> Para Todos os Links do Rodapé: Links legais como “Termos de Uso” ou “Política de Privacidade” no rodapé pertencem simplesmente à tag <footer>, dispensando o <nav>.
Preserve o Contraste dos Links: Certifique-se de que a cor do link ativo (aria-current="page") possua contraste de pelo menos 4.5:1 contra a cor de fundo do cabeçalho.

🚀

Próximo Passo Didático: Na Lição 31: Novos Tipos de Input (email, date), mergulharemos a fundo na revolução dos formulários do HTML5, explorando como os tipos email, date, number, tel, range e color acionam teclados especializados em smartphones e validam dados nativamente no cliente.