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>

Entendendo cada parte

  • <header> — identidade da página
  • <nav> — links de navegação
  • <main> — conteúdo principal (apenas um por página)
  • <section> — agrupa conteúdos relacionados
  • <article> — conteúdo independente
  • <footer> — informações finais
Se você consegue explicar o papel da área em voz alta, provavelmente está usando a tag certa.

Leitura humana × leitura por máquinas

HTML semântico permite duas leituras:

  • Humanos entendem melhor o código
  • Máquinas interpretam melhor o conteúdo

Isso é essencial para acessibilidade e SEO.

💾🧠 Resumo da aula para nunca mais esquecer

  • Páginas reais usam estrutura semântica
  • Tags explicam o papel do conteúdo
  • <main> deve existir apenas uma vez
  • Semântica melhora acessibilidade e SEO

Na próxima aula, vamos aprender sobre formulários no HTML — o primeiro contato com interação do usuário.

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Final Fantasy

O famoso título Final Fantasy, da Square Enix, tem este nome exatamente porque se tratava da última esperança da empresa, que estava à beira da falência quando o lançou. Clique aqui e conheça detalhes dessa história.

Mario e seu bigode

O personagem Mario só possui bigode porque quando ele foi criado, em 1981, a resolução de tela dos equipamentos disponíveis não permitia que fosse desenhada uma boca, então os desenvolvedores fizeram o grande bigode para contornar essa limitação tecnológica.

Cuidados com o notebook

Utilizar seu notebook em camas, sofás ou qualquer superfície macia pode obstruir as entradas e saídas de ar, elevando a temperatura e provocando danos a diversos componentes. Utilize-o sempre sobre uma superfície rígida. Saiba mais aqui.

Galaxy Game

As primeiras máquinas de fliperama do mundo a utilizarem moedas, chamadas de Galaxy Game, custavam mais de 20 mil dólares para serem produzidas. Saiba mais sobre elas aqui.

Playstation

O Playstation só nasceu porque uma parceria entre Sony e Nintendo, para desenvolver uma unidade de CD para o Super Nintendo, fracassou. Clique aqui e saiba mais.