Aula 07 — Estrutura Profissional de uma Página

Abertura de impacto

Uma página profissional não é um amontoado de tags

Enquanto o usuário comum enxerga cores e botões, o desenvolvedor Mestre enxerga a estrutura invisível que sustenta tudo: introdução, navegação, conteúdo principal, seções, artigos, complementos e rodapé.

Promessa da aula:

Você vai dominar a arquitetura semântica de uma página profissional e entender por que cada bloco deve existir no lugar certo.

Arquitetura de informação

Página improvisada vs página arquitetada

Página improvisada

É um monte de tags soltas, geralmente com div para tudo. Visualmente pode até parecer funcionar, mas é frágil, difícil de manter e pobre para SEO e acessibilidade.

Página arquitetada

Cada bloco tem função: header apresenta, nav guia, main entrega valor, section organiza, article destaca, aside complementa e footer conclui.

“Um Mestre não marca apenas o que o elemento parece. Um Mestre marca o que o elemento é.”

Topo, navegação e conteúdo principal

Header, Nav e Main

O papel do header

O <header> representa conteúdo introdutório de uma página ou seção: logotipo, título, slogan, chamada inicial e, muitas vezes, navegação.

Head não é Header

Elemento	Onde fica	Função
`head`	Fora do conteúdo visível	Metadados, title, charset, viewport, links técnicos
`header`	Dentro do body	Introdução visível da página ou seção

O papel do nav

O <nav> marca blocos de links de navegação principal. A estrutura profissional usa lista para organizar os links.

<nav>
  <ul>
    <li><a href="#sobre">Sobre</a></li>
    <li><a href="#servicos">Serviços</a></li>
    <li><a href="#contato">Contato</a></li>
  </ul>
</nav>

O papel do main

O <main> contém o conteúdo exclusivo da página. Deve existir apenas um <main> principal por documento.

Conteúdo semântico

Section, Article e Aside

section

Agrupa conteúdo por tema. Use para “Sobre”, “Serviços”, “Contato”, “Equipe” ou capítulos de uma página.

article

Representa conteúdo independente, como post, notícia, card de produto, depoimento ou item que faz sentido sozinho.

aside

Marca conteúdo complementar: links relacionados, avisos, glossário, barra lateral, horários ou informações extras.

div

É genérica. Use apenas quando nenhuma tag semântica descreve o conteúdo. Div não deve ser sua primeira escolha.

Erro comum: divite

<!-- Fraco semanticamente -->
<div class="noticia">
  <div class="titulo">Notícia Urgente</div>
  <div class="texto">Conteúdo importante.</div>
</div>

<!-- Estrutura Mestre -->
<article>
  <h2>Notícia Urgente</h2>
  <p>Conteúdo importante.</p>
</article>

Fechamento lógico

O papel do footer

O <footer> representa o fechamento lógico da página ou seção. Ele pode conter autoria, direitos autorais, links institucionais, contato, redes sociais e navegação secundária.

Nome do desenvolvedor ou empresa.
Ano e direitos autorais.
Política de privacidade e termos.
Links de contato.
Link para voltar ao topo.

Modelo completo

Estrutura profissional de uma página

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Página institucional profissional.">
  <title>Página Institucional</title>
</head>
<body id="topo">
  <header>
    <h1>Minha Empresa</h1>
    <p>Soluções digitais com estrutura profissional.</p>

    <nav>
      <ul>
        <li><a href="#sobre">Sobre</a></li>
        <li><a href="#servicos">Serviços</a></li>
        <li><a href="#contato">Contato</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="sobre">
      <h2>Sobre</h2>
      <p>Apresentação institucional.</p>
    </section>

    <section id="servicos">
      <h2>Serviços</h2>
      <article>
        <h3>Consultoria Front-End</h3>
        <p>Serviço independente dentro da seção.</p>
      </article>
    </section>

    <aside>
      <h2>Informação complementar</h2>
      <p>Horário de atendimento e links úteis.</p>
    </aside>

    <section id="contato">
      <h2>Contato</h2>
      <p>Canal de atendimento.</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 - Mateus Ernandes</p>
    <p><a href="#topo">Voltar ao topo</a></p>
  </footer>
</body>
</html>

Planejamento e hierarquia

Planeje antes de codar

Defina o tema central da página.
Escreva o h1 antes de pensar no visual.
Liste as seções principais.
Decida se algum bloco é independente o bastante para ser article.
Separe conteúdo complementar em aside.
Feche com footer claro.

Hierarquia de títulos

h1 define o tema principal.
h2 divide seções principais.
h3 subdivide conteúdo dentro das seções.
Não pule níveis por estética.
Use CSS para tamanho visual, não para bagunçar hierarquia.

Mini laboratório guiado

Cirurgia semântica contra a divite

Crie um arquivo com blocos usando div: topo, menu, conteúdo e rodapé.
Abra no navegador e inspecione.
Observe que o navegador vê caixas genéricas.
Troque por header, nav, main e footer.
Recarregue e veja a árvore semântica mais clara.

Exercício guiado

Monte um esqueleto com header, nav, main e footer. Dentro do nav, use uma lista com três links.

Exercício independente

Crie uma página de produto usando article, duas section internas e um aside para produtos relacionados.

Desafio Mestre

Página Institucional Profissional

Missão: criar o arquivo pagina-institucional.html com arquitetura de informação, semântica HTML5 e navegação interna por âncoras.

Requisitos obrigatórios

Doctype HTML5.
html lang="pt-BR".
Head completo com charset, viewport, title e meta description.
Body com header, nav, main e footer.
Header com h1 e parágrafo de apresentação.
Nav com pelo menos 4 links internos usando âncoras.
Main único com seções “Sobre”, “Serviços” e “Contato”.
Uma section contendo um article.
Um aside com informação complementar.
Footer com nome do aluno, ano e link para voltar ao topo.
Hierarquia correta de títulos.
Sem CSS pesado. O foco é estrutura, semântica e conteúdo.

Erros eliminatórios

Usar div para tudo ignorando semântica.
Ter mais de um main principal.
Confundir head com header.
Title ou meta dentro do body.
Âncoras quebradas sem id correspondente.
Tags não fechadas.

Como explicar em entrevista

“Neste projeto, criei uma página institucional usando arquitetura semântica HTML5. Organizei navegação, conteúdo principal, seções, article, aside e footer com hierarquia correta, acessibilidade e SEO desde a base.”

Banco de erros

Erros comuns e correções

Erros comuns

Usar div para tudo.
Criar dois main.
Confundir head e header.
Pular h1 para h3 por estética.
Usar section sem título.
Colocar nav fora de contexto.
Criar âncora sem id de destino.

Correções

Use semântica primeiro.
Main deve ser único.
Head é técnico; header é visível.
Respeite a hierarquia de títulos.
Section deve ter tema claro.
Nav agrupa links principais.
Todo href="#id" precisa de um id correspondente.

Diagnóstico de domínio

Você domina arquitetura semântica?

Consigo explicar por que uma página profissional é arquitetura de informação.
Uso main de forma única.
Sei decidir entre section e article.
Uso nav para links principais.
Uso footer como fechamento lógico.
Entendo que acessibilidade começa na escolha da tag.
Consigo criar uma página institucional completa semântica.

Quiz com gabarito

15 perguntas para provar domínio

Qual o papel do header? Introdução ou navegação de página/seção.
Header pode repetir? Sim, pode introduzir seções ou artigos.
Diferença entre head e header? Head é técnico; header é visível.
Para que serve nav? Marcar links de navegação principal.
Quantos main principais por página? Apenas um.
O que caracteriza article? Conteúdo independente.
Quando usar section? Para agrupamento temático.
Função do aside? Conteúdo complementar.
O que vai no footer? Fechamento, autoria, links e copyright.
Como semântica melhora acessibilidade? Cria marcos para leitores de tela.
Como ajuda SEO? Ajuda buscadores a entenderem o conteúdo.
Posso usar div? Sim, quando não houver tag semântica específica.
Vantagem para manutenção? Código mais claro e autoexplicativo.
Onde fica o logotipo? Geralmente no header.
Aside é obrigatório para entender o texto principal? Não, é complementar.

Projeto real

Acessibilidade, SEO, mercado e manutenção

Aplicação em projeto real

Em projetos profissionais, estrutura semântica permite que equipes de conteúdo, SEO, acessibilidade e desenvolvimento trabalhem sobre uma base clara e sustentável.

Acessibilidade

Marcos como nav, main, aside e footer ajudam leitores de tela a navegar mais rápido.

SEO

Buscadores entendem melhor o conteúdo quando a página declara claramente o que é principal, complementar, navegacional e institucional.

Mercado

O mercado não valoriza “divite”. Ele valoriza desenvolvedores que escrevem HTML moderno, limpo, sustentável e compreensível.

GitHub e portfólio

Registre sua página institucional

git status
git add .
git commit -m "aula-07: cria pagina institucional profissional"
git push

git status: verifica se o arquivo foi criado.
git add .: prepara as mudanças.
git commit: registra a entrega.
git push: envia para o GitHub.

Evidência para portfólio

Arquivo pagina-institucional.html.
Print da página no navegador.
Print do código semântico.
Commit no GitHub.
Explicação curta sobre arquitetura de informação.

Resumo Mestre

Semântica dá voz ao seu código

O header apresenta, o nav guia, o main entrega o valor, a section organiza, o article destaca, o aside complementa e o footer conclui. Sem isso, seu HTML é apenas silêncio.

Critério para avançar

Consigo montar a estrutura completa.
Sei usar header, nav, main, section, article, aside e footer.
Sei explicar section vs article.
Consigo criar links internos por âncora.
Consigo entregar a página institucional profissional.

Nota final: 10/10 Supremo.

Esta aula transforma marcação visual em engenharia de software, conectando arquitetura de informação, SEO, acessibilidade, manutenção, GitHub e portfólio.

Voltar ao Módulo HTML5 Voltar ao Topo

Narrador Mestre