header nav main e footer
Estruture os principais marcos de uma página com tags semânticas.
header nav main e footer é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
Elementos de referência do HTML5
O HTML5 introduziu elementos de referência que definem regiões da página:
<header>— conteúdo introdutório ou navegação<nav>— links de navegação<main>— o conteúdo principal exclusivo<footer>— informações do rodapé
Eles substituem <div>s genéricos por uma estrutura com significado.
O elemento header
O elemento <header> contém conteúdo introdutório:
<header>
<a href="/" class="logo">
<img src="logo.svg" alt="Company name">
</a>
<nav>...</nav>
<button>Sign In</button>
</header>
<!-- header can appear multiple times: page header, article header -->
<!-- But only one page-level header per page is recommended -->O elemento nav
O elemento <nav> envolve links de navegação:
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<!-- Use aria-label to distinguish multiple navs -->
<!-- Not every group of links is a nav — only major navigation -->Vários elementos nav
Uma página pode ter vários elementos <nav> — identifique cada um:
<nav aria-label="Main navigation">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Footer links">...</nav>
<!-- aria-label tells screen reader users what each nav is for -->
<!-- Screen readers list landmarks — unique labels help navigation -->O elemento main
O elemento <main> marca o conteúdo principal exclusivo desta página:
<main id="main-content">
<h1>HTML5 Landmark Elements</h1>
<p>Learn about semantic page structure...</p>
</main>
<!-- Rules:
- Only ONE main element per page
- Should not be a descendant of header, footer, aside, nav
- id="main-content" enables skip links -->
<!-- Assistive tech users jump directly to main -->O elemento footer
O elemento <footer> envolve as informações do rodapé:
<footer>
<p>© 2025 CoddyKit. All rights reserved.</p>
<nav aria-label="Footer navigation">
<a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a>
</nav>
</footer>
<!-- footer can appear multiple times: page footer, article footer -->
<!-- Page footer typically has copyright, links, contact -->Estrutura da página
Uma estrutura semântica completa de página:
<body>
<header>
<a href="/"><img src="logo.svg" alt="Site name"></a>
<nav aria-label="Main">...</nav>
</header>
<main id="main-content">
<h1>Page Title</h1>
<p>Primary content here.</p>
</main>
<aside>Related content</aside>
<footer>
<p>© 2025 Company</p>
</footer>
</body>Link para ignorar a navegação
Adicione um link para que usuários de teclado possam ignorar a navegação:
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>... navigation ...</header>
<main id="main-content" tabindex="-1">
<h1>Page Heading</h1>
</main>
/* CSS: */
.skip-link {
position: absolute; top: -100%;
background: #0070f3; color: white; padding: 0.5rem;
}
.skip-link:focus { top: 0; }Papéis de referência
Os elementos de referência do HTML5 correspondem a papéis de referência ARIA:
<header>→role="banner"(somente no nível da página)<nav>→role="navigation"<main>→role="main"<footer>→role="contentinfo"(somente no nível da página)<aside>→role="complementary"
header e footer dentro de seções
header e footer podem aparecer dentro de <article> e <section>:
<article>
<header>
<h2>Article Title</h2>
<p>By Jane Smith | March 2024</p>
</header>
<p>Article content...</p>
<footer>
<p>Tags: HTML, CSS</p>
</footer>
</article>
<!-- In this context, header/footer are NOT banner/contentinfo roles -->
<!-- They are generic sections within the article -->Erros comuns
Evite estes erros com elementos de referência semânticos:
- Usar
<nav>para todo grupo de links - Usar vários elementos
<main>em uma página - Colocar
<main>dentro de<header>ou<nav> - Usar
<footer>para conteúdo que não é do rodapé
Verificação rápida
Quantos elementos main uma página deve ter?
Recapitulação: header, nav, main e footer
Princípios essenciais dos elementos de referência:
<header>— conteúdo introdutório; pode se repetir em cada seção<nav>— navegação principal; use aria-label se houver vários<main>— conteúdo principal exclusivo; exatamente um por página<footer>— conteúdo do rodapé; pode se repetir em cada seção- Adicione um link para ignorar a navegação direcionado a
id="main-content"
Perguntas Frequentes
A aula “header nav main e footer” é grátis?
Sim — o texto completo de “header nav main e footer” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “header nav main e footer”?
Estruture os principais marcos de uma página com tags semânticas. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “header nav main e footer”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- header nav main e footer
- O elemento article: conteúdo independente
- O elemento section versus div
- time address e mark