“`html
HTML5 semântico
Arquitetura
Dominando a arquitetura de HTML5 semântico
Eu penso na estrutura do HTML como um contrato: entre o navegador, tecnologias de acessibilidade, SEO e o time.
Quando os elementos semânticos são usados com intenção, o resultado é previsível, escalável e fácil de manter.
1Comece definindo a “forma” da página
Arquitetura semântica começa com hierarquia. Antes de pensar em classes ou grid,
eu defino onde fica o <header>, o <main>,
a <nav>, o <aside> e o <footer>.
Isso evita que a página vire um “mosaico” de <div> sem significado.
- <header>: identifica cabeçalho de seção (não é exclusivo do topo).
- <main>: existe uma vez por página; concentra o conteúdo principal.
- <section> + títulos: agrupam conteúdo relacionado e autoexplicável.
- <aside>: conteúdo complementar (ex.: resumo, “relacionados”, barra lateral).
- <footer>: rodapé de seção ou do documento.
Regra de ouro: se um elemento não explica “o que é”, provavelmente ele não deveria ser semântico.
Em prática, eu só uso semânticos quando o conteúdo tem uma função evidente para o usuário.
Se não há função, eu volto para <div> e mantenho o código honesto.
2Construa a navegação como primeiro recurso de UX
Uma navegação bem arquivada não é só “menu bonito”. Ela define rotas: onde o usuário começa,
como ele encontra contexto e como ele volta. Em termos semânticos, isso significa:
Use <nav> para rotas.
Se o conteúdo for um conjunto de links que conduz a outras áreas, <nav> faz sentido.
Ex.: menu principal, navegação de página (página anterior/próxima), breadcrumb.
Evite colocar <nav> em qualquer lista de links “por padrão”.
Evite duplicidade sem necessidade.
Não crie múltiplas versões do mesmo menu sem motivo. Em SEO e acessibilidade,
redundância confunde e aumenta a carga cognitiva.
Para páginas longas, eu gosto de incluir um atalho com âncora para o
<main> (acessibilidade e navegação rápida).
E, quando há navegação interna por seções, eu respeito o padrão de títulos para criar um mapa.
Checklist de nav:
- Existe um objetivo claro (menu/rotas/atalhos)?
- Os links apontam para seções reais (id consistente)?
- O texto do link é descritivo (não “clique aqui”)?
3Exemplo de arquitetura: do documento ao conteúdo
Abaixo está um esqueleto realista, com semântica aplicada onde faz sentido: cabeçalho, navegação, conteúdo principal,
seção com título, conteúdo complementar e rodapé. Eu trato isso como “base de projeto” para acelerar a consistência.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exemplo semântico</title>
</head>
<body>
<a href="#conteudo" class="skip">Pular para o conteúdo</a>
<header>
<div>
<strong>Minha Plataforma</strong>
</div>
<nav aria-label="Navegação principal">
<ul>
<li><a href="#visao-geral">Visão geral</a></li>
<li><a href="#recursos">Recursos</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>
</header>
<main id="conteudo">
<section id="visao-geral" aria-labelledby="t-visao-geral">
<header>
<h1 id="t-visao-geral">Visão geral</h1>
<p>Resumo do que o usuário encontra nesta página.</p>
</header>
<p>Aqui vai o conteúdo principal...</p>
</section>
<section id="recursos">
<h2>Recursos</h2>
<article>
<h3>Recurso A</h3>
<p>Descrição do recurso.</p>
</article>
<article>
<h3>Recurso B</h3>
<p>Descrição do recurso.</p>
</article>
</section>
<aside aria-label="Informações complementares">
<h2>Links úteis</h2>
<ul>
<li><a href="#">Guia rápido</a></li>
<li><a href="#">Documentação</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 Minha Plataforma</p>
</footer>
</body>
</html>
Observação: eu uso <h1> de forma intencional. Em layouts reais, frequentemente há 1único
<h1> no <main> e os demais títulos seguem uma hierarquia consistente.
4Semântica é mais que tags: respeite a hierarquia de títulos e o propósito
Depois de estruturar a página, o que mais destrói a arquitetura semântica é a falta de consistência
em três pontos: hierarquia de headings, escopo e papel de cada bloco.
1) Heading hierarchy
- Evite pular níveis sem motivo (ex.: de
<h2>direto para<h4>). - Use títulos para que cada seção consiga “se sustentar” ao ser lida em navegação por headings.
- Se você usa
<header>dentro de uma seção, isso ajuda o leitor a localizar contexto.
2) Escopo e intenção
<article>para conteúdo independente (posts, cards com significado próprio).<section>para agrupamento temático com título.<aside>para complemento (não replique o conteúdo principal).- Se é status/nota contextual, use atributos e elementos apropriados conforme o caso.
Para validar sua arquitetura, eu recomendo usar a navegação do navegador (lista de headings/estrutura),
inspecionar “o que faz sentido” para um leitor de tela e garantir que o DOM reflita a intenção:
conteúdo principal em <main>, grupos com <section>/<article>, rotas em <nav>.
3) Semântica consistente em times
- Defina um “padrão de página” para vocês (mesmo que simples).
- Nomeie ids de seções com padrão (ex.:
visao-geral,recursos). - Evite trocar tags sem necessidade: se existe intenção, mantenha.
“`
Sou Apaixonado pela programação e estou trilhando o caminho de ter cada diz mais conhecimento e trazer toda minha experiência vinda do Design para a programação resultando em layouts incríveis e idéias inovadoras! Conecte-se Comigo!