Toda página web bem estruturada contém estas quatro seções centrais:
1. Cabeçalho (<header>)
- Logo / marca do site.
- Menu de navegação principal (links para seções maiores).
- Barra de busca.
- Controles de conta do usuário (login, carrinho, perfil).
- Fixo/sticky no scroll para acesso constante.
2. Corpo / Conteúdo Principal (<main>)
- A informação primária que a página existe para entregar.
- Artigos, grades de produtos, dashboards, formulários, vídeos, ferramentas interativas.
- HTML semântico:
<article>, <section>, headings (<h1>–<h6>). - Layout responsivo (CSS Grid/Flexbox) adaptando ao viewport.
3. Barra Lateral (<aside>)
- Conteúdo secundário, contextual.
- Posts relacionados, filtros de categoria, bio do autor, inscrição newsletter.
- Unidades de publicidade (banners laterais, native ads).
- Prova social (depoimentos, selos de confiança).
- Frequentemente colapsa no mobile (hambúrguer/gaveta).
4. Rodapé (<footer>)
- Aviso de copyright, ano.
- Links legais: Política de Privacidade, Termos de Serviço, Política de Cookies, Declaração de Acessibilidade.
- Info de contato (endereço, telefone, e-mail, link formulário contato).
- Navegação secundária: sitemap, carreiras, imprensa, investidores.
- Ícones redes sociais (SVG, labels acessíveis).
- Inscrição newsletter (frequentemente duplicada da lateral).
Bônus: Ocultos Mas Críticos
<meta> tags (viewport, description, Open Graph, Twitter Cards, canonical).<script type="application/ld+json"> structured data (Schema.org).- Registro Service Worker (PWA offline).
Juntos, criam página coerente, navegável, confiável.
