Tags semânticas: header, nav, main, article e footer
Substitua divs sem significado por elementos HTML5 semânticos e entenda como eles ajudam navegadores, mecanismos de busca e leitores de tela.
Tags semânticas: header, nav, main, article e footer é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que é HTML semântico?
HTML semântico usa elementos que descrevem o significado do conteúdo, não apenas sua aparência. <article> diz "isto é um conteúdo independente". Um <div> genérico não diz nada.
Antes da semântica: sopa de divs
Os primeiros desenvolvedores da web construíam layouts inteiramente com elementos <div> e <span>. Os leitores de tela não conseguiam distinguir a navegação do conteúdo e dos anúncios. Os mecanismos de busca precisavam adivinhar a estrutura da página.
<!-- Old way -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div><header> — Cabeçalho do site ou da seção
O elemento <header> contém conteúdo introdutório para a página ou uma seção: normalmente o logotipo, o nome do site e a navegação. Uma página pode ter vários cabeçalhos — um para o site e um para cada artigo.
<header>
<a href="/"><img src="logo.svg" alt="CoddyKit"></a>
<nav>...</nav>
</header><nav> — Links de navegação
Use <nav> para envolver conjuntos de links de navegação: o menu principal, uma trilha de navegação ou um índice. Os leitores de tela anunciam os marcos de navegação, permitindo que os usuários passem diretamente para eles ou por eles.
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/courses">Courses</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav><main> — O conteúdo principal
Deve haver exatamente um <main> por página. Ele contém o conteúdo principal exclusivo desta página — não elementos repetidos, como a navegação ou o rodapé. As tecnologias assistivas permitem que os usuários passem diretamente para o conteúdo principal.
<main>
<h1>Learn Frontend Development</h1>
<p>Start your journey here...</p>
</main><article> — Conteúdo independente
<article> envolve conteúdo que faz sentido por si só e poderia ser distribuído: uma publicação de blog, uma notícia, um comentário de usuário ou um cartão de produto. Pergunte: "Isso faria sentido se eu o copiasse para outro site?"
<article>
<h2>Introduction to CSS Grid</h2>
<p>CSS Grid revolutionised web layout...</p>
<time datetime="2025-01-15">January 15, 2025</time>
</article><section> — Agrupamento temático
<section> agrupa conteúdo relacionado que pertence ao mesmo conjunto — capítulos, abas ou áreas temáticas. Cada seção normalmente tem um título. Se o conteúdo pudesse existir por si só, use article.
<section>
<h2>Core Technologies</h2>
<p>HTML, CSS, and JavaScript...</p>
</section><aside> — Conteúdo complementar
<aside> contém conteúdo relacionado apenas indiretamente ao conteúdo ao redor: barras laterais, citações destacadas, publicidade ou links relacionados. Os leitores de tela o expõem como um marco complementar.
<footer> — Conteúdo de encerramento
<footer> contém informações sobre o elemento que o contém: avisos de direitos autorais, links de contato e documentos relacionados. Assim como header, uma página pode ter vários rodapés.
<footer>
<p>© 2025 CoddyKit. All rights reserved.</p>
<nav aria-label="Footer">
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
</nav>
</footer>Hierarquia de títulos: h1 a h6
Use títulos para criar um esboço lógico do documento. Deve haver apenas um <h1> por página. Use h2 para subtítulos, h3 para subtítulos de segundo nível e assim por diante. Não pule níveis nem use títulos apenas por causa do tamanho visual.
Por que a semântica é importante para SEO e acessibilidade
Os mecanismos de busca usam a estrutura semântica para compreender o conteúdo da página — uma página com marcos e uma hierarquia de títulos adequados geralmente obtém uma classificação melhor. Os usuários de leitores de tela navegam por marcos e títulos, o que torna a semântica uma questão direta de acessibilidade.
Verificação rápida
Qual elemento deve envolver o conteúdo principal exclusivo de uma página (presente exatamente uma vez)?
Recapitulação: marcos semânticos do HTML5
Use <header>, <nav>, <main>, <article>, <section>, <aside> e <footer> para dar ao documento uma estrutura que os navegadores, os mecanismos de busca e os leitores de tela compreendam.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 41
- Aulas
- 163
Perguntas Frequentes
A aula “Tags semânticas: header, nav, main, article e footer” é grátis?
Sim — o texto completo de “Tags semânticas: header, nav, main, article 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Tags semânticas: header, nav, main, article e footer”?
Substitua divs sem significado por elementos HTML5 semânticos e entenda como eles ajudam navegadores, mecanismos de busca e leitores de tela. Você pratica Frontend 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 Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend 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 2 de 4.
Quanto tempo leva a aula “Tags semânticas: header, nav, main, article 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 Frontend Academy?
Sim. Cada aula de Frontend 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
- Estrutura do documento: DOCTYPE, html, head e body
- Tags semânticas: header, nav, main, article e footer
- Texto, imagens, links e listas
- Formulários: input, label e button