Códigos HTML prontos são blocos de código testados e reutilizáveis que aceleram a montagem de páginas web. Os essenciais no dia a dia de qualquer projeto são: estrutura base HTML5, header com menu, footer responsivo, formulário de contato, card, landing page simples, página 404 e modal nativo. Todos os snippets abaixo estão em HTML5 semântico, são responsivos e seguem as boas práticas de acessibilidade exigidas pelo Google em 2026.
A tabela a seguir lista as tags HTML5 que aparecem em quase todo código pronto e o que cada uma faz:
| Tag | Função |
|---|---|
<!DOCTYPE html> | Declara o documento como HTML5 |
<html lang="pt-BR"> | Raiz da página, define idioma |
<head> | Metadados não visíveis (charset, viewport, title) |
<body> | Conteúdo visível da página |
<header> | Cabeçalho semântico (logo, menu) |
<nav> | Bloco de navegação |
<main> | Conteúdo principal único da página |
<section> | Agrupamento temático de conteúdo |
<article> | Conteúdo independente reutilizável |
<footer> | Rodapé semântico |
Estrutura HTML5 base (template para qualquer página)
Esta é a base mínima de qualquer página HTML5 em 2026. Cobre charset UTF-8, viewport responsivo, descrição para SEO e idioma. Copie e use como ponto de partida de qualquer projeto novo.
<!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="Descrição da página em até 160 caracteres">
<title>Título da página</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<!-- Logo e menu vão aqui -->
</header>
<main>
<!-- Conteúdo principal da página -->
</main>
<footer>
<!-- Rodapé -->
</footer>
<script src="script.js"></script>
</body>
</html>
Três detalhes que fazem diferença real: o lang="pt-BR" ajuda buscadores e leitores de tela; o viewport é o que torna a página responsiva em celular; e o script.js no final do <body> faz a página renderizar antes de carregar JavaScript.
Header com menu de navegação responsivo
Este header funciona como cabeçalho de qualquer site. Usa HTML5 semântico (<header> + <nav>) que o Google entende como estrutura principal e leitores de tela anunciam corretamente para usuários cegos.
<header class="cabecalho">
<a href="/" class="logo" aria-label="Voltar para home">
<img src="logo.png" alt="Logo da empresa">
</a>
<nav class="menu" aria-label="Menu principal">
<ul>
<li><a href="/">Início</a></li>
<li><a href="/sobre/">Sobre</a></li>
<li><a href="/servicos/">Serviços</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/contato/">Contato</a></li>
</ul>
</nav>
</header>
O aria-label em cada elemento de navegação garante que leitores de tela anunciem corretamente. Para tornar mobile-first, basta adicionar CSS com display: flex no header e uma media query que esconde o menu em telas pequenas. A acessibilidade já está garantida no HTML.
Footer responsivo com colunas
Este footer cobre o cenário mais comum: três colunas (sobre, links úteis, contato) que viram empilhadas em celular automaticamente quando você aplica CSS Grid ou Flexbox.
<footer class="rodape">
<div class="rodape-colunas">
<section class="rodape-bloco">
<h3>Sobre nós</h3>
<p>Breve descrição da empresa em 1 ou 2 linhas.</p>
</section>
<section class="rodape-bloco">
<h3>Links úteis</h3>
<ul>
<li><a href="/sobre/">Sobre</a></li>
<li><a href="/politica-privacidade/">Política de privacidade</a></li>
<li><a href="/termos/">Termos de uso</a></li>
</ul>
</section>
<section class="rodape-bloco">
<h3>Contato</h3>
<address>
<p>[email protected]</p>
<p>(11) 99999-9999</p>
</address>
</section>
</div>
<div class="rodape-final">
<p>© 2026 Nome da Empresa. Todos os direitos reservados.</p>
</div>
</footer>
A tag <address> é semântica e Google interpreta como dado de contato real. O © é a entidade HTML para o símbolo ©. Para os direitos reservados se atualizarem sozinhos a cada ano, basta trocar 2026 por um pequeno JavaScript com new Date().getFullYear().
Formulário de contato completo
Este formulário cobre os campos essenciais para captação (nome, email, telefone, mensagem) com validação HTML5 nativa (required, type="email", pattern) que funciona antes mesmo de você escrever uma linha de JavaScript.
<form class="formulario-contato" action="/enviar-contato" method="POST">
<label for="nome">Nome completo</label>
<input type="text" id="nome" name="nome" required minlength="3" placeholder="Seu nome">
<label for="email">Email</label>
<input type="email" id="email" name="email" required placeholder="[email protected]">
<label for="telefone">Telefone</label>
<input type="tel" id="telefone" name="telefone" pattern="\(\d{2}\) \d{4,5}-\d{4}" placeholder="(11) 99999-9999">
<label for="assunto">Assunto</label>
<select id="assunto" name="assunto" required>
<option value="">Selecione um assunto</option>
<option value="duvida">Dúvida</option>
<option value="orcamento">Orçamento</option>
<option value="suporte">Suporte</option>
</select>
<label for="mensagem">Mensagem</label>
<textarea id="mensagem" name="mensagem" rows="5" required minlength="10" placeholder="Sua mensagem"></textarea>
<button type="submit">Enviar mensagem</button>
</form>
Cada <label> precisa do for que aponta para o id do campo correspondente. Isso vincula visualmente e para leitores de tela, e clicar no rótulo foca o campo automaticamente. O pattern no telefone usa regex para forçar o formato brasileiro com DDD.
Card de produto ou serviço
Cards aparecem em landing pages, e-commerce, blogs e portfólios. Este modelo usa <article> porque o card é conteúdo independente que faz sentido sozinho (boa prática semântica que o Google usa para entender estrutura).
<article class="card">
<img src="produto.jpg" alt="Descrição do produto" class="card-imagem">
<div class="card-conteudo">
<h3 class="card-titulo">Nome do produto</h3>
<p class="card-descricao">Descrição curta em 1 ou 2 linhas.</p>
<p class="card-preco"><strong>R$ 199,90</strong></p>
<a href="/produto/" class="card-botao">Ver detalhes</a>
</div>
</article>
Sempre preencha o alt da imagem com descrição real do conteúdo, não com palavras-chave. Google penaliza alt vazio ou só com keywords. Para galeria de cards, repita esse <article> dentro de um <section> com CSS Grid ou Flexbox.
Landing page simples completa
Este é um esqueleto de landing page funcional: hero com chamada principal, seção de benefícios em 3 colunas e CTA final. Suficiente para campanha de captação de leads ou apresentação de produto único.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sua oferta principal | Marca</title>
<link rel="stylesheet" href="landing.css">
</head>
<body>
<section class="hero">
<h1>Título principal que resolve a dor do cliente</h1>
<p class="subtitulo">Subtítulo explicando como você resolve isso em 1 frase.</p>
<a href="#cta" class="botao-principal">Quero saber mais</a>
</section>
<section class="beneficios">
<h2>Por que escolher</h2>
<div class="beneficios-grid">
<article class="beneficio">
<h3>Benefício 1</h3>
<p>Explicação curta do benefício.</p>
</article>
<article class="beneficio">
<h3>Benefício 2</h3>
<p>Explicação curta do benefício.</p>
</article>
<article class="beneficio">
<h3>Benefício 3</h3>
<p>Explicação curta do benefício.</p>
</article>
</div>
</section>
<section id="cta" class="cta-final">
<h2>Pronto para começar?</h2>
<a href="https://wa.me/5511999999999" class="botao-principal">Falar no WhatsApp</a>
</section>
</body>
</html>
Hero, benefícios e CTA são o trio mínimo que toda landing page eficaz tem. O link wa.me direto para WhatsApp converte bem em Brasil porque elimina fricção do telefone digitado.
Página de erro 404 personalizada
Página 404 não é só estética: o Google avalia se ela existe e se devolve o status HTTP correto. Esta versão tem mensagem clara, navegação alternativa e código pronto pra customizar.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página não encontrada | Sua Marca</title>
</head>
<body>
<main class="pagina-404">
<h1>404</h1>
<h2>Ops, esta página não existe</h2>
<p>O link pode ter mudado ou a página foi removida.</p>
<nav aria-label="Sugestões de navegação">
<ul>
<li><a href="/">Voltar para a home</a></li>
<li><a href="/blog/">Ver o blog</a></li>
<li><a href="/contato/">Falar com a gente</a></li>
</ul>
</nav>
</main>
</body>
</html>
O servidor precisa devolver código HTTP 404 nesta página, não 200. Em WordPress isso já vem configurado no 404.php do tema. Em sites estáticos no Apache, configurar via .htaccess com ErrorDocument 404 /404.html.
Modal nativo com a tag <dialog>
A tag <dialog> é nativa de HTML5 e funciona em todos os navegadores atuais. Substitui a maioria dos modais que antes exigiam JavaScript pesado ou bibliotecas como Bootstrap, e tem comportamento de acessibilidade automático (foco, tecla ESC para fechar).
<button onclick="document.getElementById('modal').showModal()">Abrir modal</button>
<dialog id="modal">
<h2>Título do modal</h2>
<p>Conteúdo do modal vai aqui. Pode ter formulário, texto, imagem.</p>
<form method="dialog">
<button>Fechar</button>
</form>
</dialog>
O <form method="dialog"> é o truque para fechar o modal sem JavaScript adicional. Funciona porque o navegador interpreta o submit desse formulário como comando de fechar o <dialog>. Para modais acessíveis sem bibliotecas externas, essa é a solução padrão em 2026.
Tabela responsiva HTML5
Tabelas continuam essenciais para dados estruturados. Este snippet usa <thead>, <tbody> e scope em cabeçalhos, exatamente o que leitores de tela e o Google esperam.
<table class="tabela-dados">
<caption>Comparativo de planos 2026</caption>
<thead>
<tr>
<th scope="col">Plano</th>
<th scope="col">Preço</th>
<th scope="col">Armazenamento</th>
<th scope="col">Suporte</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Básico</th>
<td>R$ 29/mês</td>
<td>10 GB</td>
<td>Email</td>
</tr>
<tr>
<th scope="row">Profissional</th>
<td>R$ 79/mês</td>
<td>100 GB</td>
<td>Email + Chat</td>
</tr>
<tr>
<th scope="row">Empresarial</th>
<td>R$ 199/mês</td>
<td>1 TB</td>
<td>Suporte 24h</td>
</tr>
</tbody>
</table>
O <caption> é o título acessível da tabela e o scope="col" e scope="row" garantem que leitores de tela leiam a tabela coluna por coluna corretamente. Para responsividade em mobile, basta envolver com <div style="overflow-x:auto"> e a tabela rola horizontalmente em telas pequenas.
Galeria de imagens responsiva com <picture>
A tag <picture> carrega imagens diferentes conforme o tamanho da tela ou densidade de pixels. É a forma moderna de servir imagens otimizadas sem JavaScript.
<picture>
<source media="(min-width: 1200px)" srcset="banner-grande.webp" type="image/webp">
<source media="(min-width: 768px)" srcset="banner-medio.webp" type="image/webp">
<source srcset="banner-mobile.webp" type="image/webp">
<img src="banner-fallback.jpg" alt="Descrição da imagem" loading="lazy">
</picture>
O atributo loading="lazy" é nativo de HTML5 e carrega a imagem só quando o usuário rola até ela, economizando dados móveis e melhorando Core Web Vitals. WebP é o formato recomendado pelo Google em 2026 por compressão superior ao JPG.
Boas práticas ao copiar código HTML pronto
Cinco regras que evitam dor de cabeça depois:
Sempre adapte para o seu contexto: copiar e colar sem entender o que cada tag faz gera código difícil de manter. Leia cada bloco antes de usar.
Valide com a W3C Validator: cole o código ou aponte a URL e a ferramenta lista todo erro de sintaxe. HTML válido tem menos bug e Google entende melhor.
Garanta acessibilidade real: alt em toda imagem, label em todo campo de formulário, aria-label em ícones sem texto. Não é opcional em 2026, é critério de qualidade do Google.
Teste em vários navegadores: Chrome, Firefox, Safari e Edge. A maioria do HTML moderno funciona em todos, mas vale conferir antes de publicar.
Combine com CSS e JavaScript externos: estilos inline e scripts inline funcionam mas dificultam manutenção. Separe HTML, CSS e JS em arquivos diferentes desde o início.
Para entender como esses códigos se encaixam num projeto completo, veja como criar site em HTML do zero com o passo a passo de publicação no GitHub Pages e alternativas gratuitas.
Onde encontrar mais códigos HTML prontos confiáveis
Quatro fontes que valem ter no bookmark:
- MDN Web Docs: documentação oficial mantida pela Mozilla, com exemplos copiáveis em cada tag. Referência número 1 para qualquer dev.
- CodePen: comunidade com milhões de snippets HTML, CSS e JS funcionais. Filtre por “popular” para achar os mais validados.
- HTML5 Boilerplate: template profissional de estrutura base, atualizado por uma equipe ativa. Base de produção para sites reais.
- CSS-Tricks: blog técnico com snippets HTML+CSS comentados, focado em padrões modernos.
Vídeo do Curso em Vídeo mostra a construção de um site completo do zero em HTML, ótimo complemento prático:
Perguntas frequentes
Posso copiar código HTML pronto e usar em sites comerciais?
Sim, na maioria dos casos. Snippets de documentação como MDN, W3C, HTML5 Boilerplate e CodePen geralmente têm licença permissiva (MIT, BSD, Creative Commons). Templates completos pagos têm restrições próprias. Sempre confira a licença antes de usar comercialmente.
Qual a estrutura mínima de um arquivo HTML válido?
A estrutura mínima exige <!DOCTYPE html>, <html lang="...">, <head> com <meta charset> e <title>, e <body>. Sem esses elementos, o W3C Validator marca como inválido. Adicionar <meta name="viewport"> é obrigatório para responsividade em celular.
Por que meu código HTML aparece quebrado no celular?
Falta a meta tag viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Sem ela, o celular tenta mostrar o site em zoom como se fosse desktop, ficando ilegível. Essa única linha resolve.
Preciso aprender HTML5 ou posso usar HTML4?
HTML5 é o padrão atual e único recomendado em 2026. HTML4 funciona mas perde recursos importantes como tags semânticas (header, nav, section, article, footer), formulários com validação nativa, vídeo e áudio embutidos. Projetos novos devem nascer em HTML5.
Como tornar um código HTML pronto responsivo?
Adicione a meta tag viewport no <head>, use unidades relativas no CSS (rem, em, %) em vez de pixels fixos, aplique media queries para breakpoints comuns (768px e 1200px) e teste em DevTools do Chrome simulando dispositivos diferentes.
O que é HTML semântico e por que importa?
HTML semântico usa tags que descrevem o significado do conteúdo (header, nav, main, article, section, footer) em vez de só div genérica. Importa porque o Google entende melhor a estrutura para SEO, leitores de tela navegam corretamente e o código fica mais legível para outros devs.
Existe diferença entre HTML e HTML5?
HTML5 é a quinta e atual versão do HTML, lançada em 2014 e atualizada continuamente. Adicionou tags semânticas, validação nativa de formulários, tags de mídia (<video>, <audio>), <canvas> para gráficos e suporte oficial a aplicações web. Quando dizem “HTML” hoje, geralmente se referem a HTML5.
