Do desenho ao código: transformando seu wireframe em HTML semântico
Se você fez o dever de casa dos últimos dois artigos, já tem um wireframe validado na mão — sabe exatamente onde fica o menu, onde entra a imagem de destaque, onde ficam as seções de conteúdo. Chegou a hora que você estava esperando: transformar cada caixa desse desenho em código de verdade.
Só um lembrete antes de começar: ainda não é hora de estilizar nada. Nesta etapa, o objetivo é escrever HTML correto e semântico — cor, fonte e layout ficam para o próximo artigo da série.
O esqueleto de todo documento HTML
Todo arquivo HTML começa com a mesma estrutura básica. Vale entender o papel de cada parte antes de sair copiando:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nome da empresa — Início</title>
</head>
<body>
<!-- todo o conteúdo visível da página vai aqui -->
</body>
</html>
<!DOCTYPE html>— avisa o navegador que está lendo HTML5. Sem essa linha, alguns navegadores voltam para um “modo de compatibilidade” antigo e quebram seu layout sem avisar.<html lang="pt-BR">— o atributolangnão é decoração: leitores de tela usam ele para escolher a pronúncia certa, e buscadores usam para indexar o idioma da página.<head>— não aparece na tela. É onde ficam metadados: codificação de caracteres, configuração de zoom para celular, título da aba do navegador.<title>— o texto que aparece na aba do navegador e nos resultados de busca. Cada página do site precisa de um título diferente e descritivo.<body>— tudo o que é visível mora aqui. É a parte que vamos preencher com o conteúdo do seu wireframe.
Por que semântica importa (e não é só regra por regra)
Dá para construir uma página inteira só com <div>. O navegador não vai reclamar. Mas isso joga fora uma informação valiosa: o que cada bloco significa.
Compare os dois trechos abaixo — visualmente, no navegador, eles podem ficar idênticos:
<!-- versão sem semântica -->
<div class="topo">
<div class="logo">Minha Empresa</div>
<div class="menu">Início | Sobre | Contato</div>
</div>
<!-- versão semântica -->
<header>
<p class="logo">Minha Empresa</p>
<nav>
<a href="#inicio">Início</a>
<a href="#sobre">Sobre</a>
<a href="#contato">Contato</a>
</nav>
</header>
A segunda versão diz explicitamente “isto é um cabeçalho” e “isto é uma navegação”. Isso importa por três motivos concretos:
- Acessibilidade — leitores de tela usados por pessoas com deficiência visual anunciam “navegação” ou “cabeçalho” para quem está ouvindo, ajudando a pular direto para o que interessa.
- SEO — buscadores dão mais peso a conteúdo dentro de tags semânticas corretas na hora de entender do que a página trata.
- Manutenção — daqui a seis meses, você (ou outra pessoa) vai entender a estrutura olhando o código, sem precisar decifrar nomes de classe.
Do wireframe para as tags: um mapa rápido
Se você seguiu o roteiro do artigo sobre wireframes, cada caixa do seu desenho já tem uma tradução direta para HTML:
| Bloco no wireframe | Tag semântica |
|---|---|
| Logo + menu no topo | <header> com <nav> dentro |
| Conteúdo principal da página | <main> |
| Cada seção de conteúdo (hero, serviços, sobre) | <section> |
| Bloco de conteúdo independente (um card, um post) | <article> |
| Rodapé com links e informações de contato | <footer> |
| Imagem de destaque | <img> com atributo alt preenchido |
| Botão de ação | <button> ou <a> estilizado depois |
Não existe uma única forma “certa” de estruturar — mas essa tabela cobre a grande maioria dos casos que você vai encontrar montando uma página institucional.
Hierarquia de títulos: só existe um <h1>
Assim como no wireframe você definiu o que era mais importante, no HTML essa hierarquia se traduz em títulos numerados de <h1> a <h6>.
<h1>Nome da Empresa</h1>
<h2>Nossos Serviços</h2>
<h3>Consultoria</h3>
<h3>Manutenção</h3>
<h2>Fale Conosco</h2>
Regra simples de seguir: cada página tem exatamente um <h1> — geralmente o nome da empresa ou o título principal daquela página. Os demais títulos descem em ordem, sem pular níveis (não vá de <h2> direto para <h4> só porque o texto menor “parece” combinar melhor visualmente — isso é problema de CSS, não de HTML).
Formatação básica de texto
Alguns elementos que você vai usar o tempo todo dentro do conteúdo:
<p>Somos uma empresa especializada em <strong>logística industrial</strong>, atendendo clientes em todo o estado há mais de <em>15 anos</em>.</p>
<p>— parágrafo. Todo bloco de texto corrido fica dentro de um.<strong>— importância real do conteúdo (não é só negrito visual — leitores de tela dão ênfase na voz).<em>— ênfase real (diferente de itálico decorativo).
Evite usar <b> e <i> puros a menos que realmente queira só o efeito visual sem significado semântico — na prática, <strong> e <em> cobrem quase todos os casos de um site institucional.
Valide antes de considerar pronto
Depois de estruturar a página, existe uma ferramenta gratuita que aponta erros de sintaxe e uso incorreto de tags: o validador do W3C — o mesmo consórcio que define os padrões da Web.
Você pode colar o código diretamente ou enviar o arquivo. Ele aponta linha por linha o que está fora do padrão: tag não fechada, atributo obrigatório faltando, aninhamento incorreto. Rodar essa validação antes de entregar o HTML pega erros que o navegador esconde de você — os navegadores são bem tolerantes com código malformado, mas isso não significa que o código está correto.
Checklist antes de fechar essa etapa
<!DOCTYPE html>e<html lang="pt-BR">presentes- Um
<title>descritivo por página - Estrutura usando
<header>,<main>,<section>,<footer>— não só<div> - Um único
<h1>por página, com hierarquia de títulos sem pular níveis - Todas as imagens com atributo
altpreenchido - Código validado no validador do W3C sem erros
Se todos esses pontos estão marcados, seu HTML estrutural está pronto — e essa é exatamente a entrega desta etapa do desafio.
Próximo passo
Com a estrutura no lugar, o próximo artigo da série entra na parte que todo mundo espera: cor, tipografia, espaçamento e layout com CSS, transformando essa base semântica em uma página com identidade visual de verdade. Até lá!
Compartilhe:
Publicar comentário