Até agora, você aprendeu várias tags isoladas. Nesta aula, vamos juntar tudo e montar a estrutura completa de uma página HTML real.
Ainda sem CSS e sem JavaScript — foco total na estrutura.
Pensando como um ser humano (e como um navegador)
Antes de escrever qualquer código, pense:
- O que é o cabeçalho da página?
- Onde fica a navegação?
- Qual é o conteúdo principal?
- O que é complementar?
- Onde fica o rodapé?
Essas respostas guiam o uso correto das tags semânticas.
Estrutura semântica básica
Uma página HTML moderna costuma seguir esta estrutura:
<header>
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
Dentro dessas áreas, colocamos o conteúdo adequado.
Montando uma página simples
Veja um exemplo completo de página semântica:
<!DOCTYPE html> <html> <head> <title>Página de exemplo</title> </head>
<body>
<header>
<h1>Meu Site</h1>
</header>
<nav>
<a href="#">Início</a>
<a href="#">Sobre</a>
<a href="#">Contato</a>
</nav>
<main>
<section>
<h2>Bem-vindo</h2>
<p>Este é o conteúdo principal da página.</p>
</section>
<article>
<h2>Artigo em destaque</h2>
<p>Um conteúdo que faz sentido sozinho.</p>
</article>
</main>
<footer>
<p>© 2026 - Contém Bits</p>
</footer>