Criar HTML para email marketing é essencial para quem quer enviar campanhas profissionais e com alta taxa de conversão. Diferente de usar templates genéricos, dominar a estrutura HTML permite personalizar cada detalhe da mensagem, desde o layout até os call-to-actions, garantindo que seu email funcione perfeitamente em qualquer cliente de email — seja Gmail, Outlook ou dispositivos móveis. Essa habilidade é especialmente valiosa para empresas que buscam resultados reais em suas estratégias de geração de leads.
O desafio é que nem todo HTML funciona bem em emails. Muitas propriedades CSS são ignoradas pelos clientes de email, e estruturas complexas podem quebrar a visualização. Por isso, é fundamental conhecer as boas práticas: usar tabelas para layout, CSS inline, imagens otimizadas e testes em múltiplos dispositivos. Quando feito corretamente, o HTML customizado para email marketing aumenta a taxa de abertura, reduz rejeições e melhora significativamente a experiência do usuário.
Neste guia, você aprenderá passo a passo como estruturar um email HTML que funciona, desde a configuração básica até técnicas avançadas de responsividade. Com esse conhecimento, suas campanhas de email terão muito mais impacto e gerarão melhores resultados para sua estratégia de marketing.
O que é HTML para email marketing e por que ele é diferente do HTML comum
HTML para email marketing é um subconjunto específico da linguagem, escrito sob restrições severas de compatibilidade que simplesmente não existem no desenvolvimento web convencional. Enquanto um site moderno pode explorar CSS Grid, Flexbox, JavaScript e centenas de propriedades avançadas, um email HTML precisa funcionar em ambientes radicalmente distintos entre si — do Gmail no Chrome ao Outlook 2019 no Windows, passando pelo Apple Mail no iPhone.
A diferença central está no mecanismo de renderização. Navegadores como Chrome e Firefox seguem os padrões do W3C de forma consistente. Clientes de email, por outro lado, operam com motores próprios: o Outlook a partir da versão 2007 processa HTML com o Microsoft Word, não com um motor de navegador. O Gmail remove a tag <head> inteira em determinadas situações. O Yahoo bloqueia seletores CSS específicos. Esse ambiente fragmentado obriga o desenvolvedor a adotar técnicas que seriam consideradas ultrapassadas em qualquer outro contexto.
Outro ponto crítico é a ausência de JavaScript. Nenhum cliente de email executa scripts por razões de segurança, o que significa que toda interatividade precisa ser construída com CSS puro — ou simplesmente não existir. Além disso, fontes externas têm suporte limitado, propriedades de posicionamento como position: absolute são ignoradas na maioria dos clientes, e o modelo de caixa CSS se comporta de maneira inconsistente entre plataformas.
Compreender essas limitações não é opcional — é o ponto de partida para quem quer criar emails que chegam, abrem e geram resultado. Para ter uma visão mais ampla do ecossistema antes de mergulhar no código, vale conferir o artigo sobre como funciona email marketing.
Requisitos técnicos antes de começar: o que você precisa saber
Antes de escrever uma linha de código, é fundamental entender o ambiente técnico em que o email será renderizado. Ignorar esses requisitos resulta em layouts quebrados, imagens que não carregam e mensagens que vão direto para o spam. Os três pilares que precisam ser dominados são: a razão pelo uso de tabelas, o suporte dos principais clientes de email em 2025 e as regras de aplicação de CSS.
Por que emails HTML usam tabelas em vez de divs
A resposta direta é: o Outlook. As versões de 2007 a 2021 — incluindo o Outlook clássico no Windows 11 — utilizam o motor de renderização do Microsoft Word para processar HTML de email. Esse motor tem suporte extremamente limitado a CSS de layout moderno. Propriedades como display: flex, display: grid e até display: block em elementos inline se comportam de forma imprevisível ou simplesmente não funcionam.
Tabelas HTML, por sua vez, têm suporte universal e consistente em todos os clientes de email, inclusive no Outlook. O elemento <table> com seus atributos nativos — cellpadding, cellspacing, border, width e align — funciona de maneira previsível em praticamente qualquer ambiente de renderização, seja de 2010 ou de 2025.
Isso não significa que <div> seja totalmente vetado. Em clientes modernos como Apple Mail e Gmail no navegador, divs funcionam sem problemas. A abordagem profissional é usar tabelas como estrutura principal de layout e reservar divs para elementos menores onde o suporte é garantido. Para layouts de múltiplas colunas, tabelas aninhadas continuam sendo a solução mais segura e testada.
Quais clientes de email suportam quais recursos em 2025
O mercado de clientes de email em 2025 é dominado por poucos players, mas cada um apresenta comportamentos distintos. Conhecer o suporte de cada plataforma orienta as decisões técnicas ao longo do desenvolvimento:
- Gmail (web e app Android/iOS): Remove a tag
<head>em emails não autenticados via AMP. Suporta media queries na versão web. Bloqueia CSS externo. Aceita a maior parte do CSS inline. A versão em app apresenta limitações maiores com seletores complexos. - Apple Mail (macOS e iOS): O cliente mais permissivo do mercado. Suporta media queries, CSS avançado, Web Fonts via
@font-face, SVG e até algumas propriedades CSS modernas. É o equivalente a um navegador atual dentro do universo de email. - Outlook (2016, 2019, 2021, clássico no Windows 11): O cliente mais problemático. Por usar o Word como motor de renderização, não suporta
border-radius,background-imageem elementos não-table, padding em elementos inline e dezenas de outras propriedades. Exige comentários condicionais específicos para correções. - Outlook.com (web): Diferente do Outlook desktop. Opera com um motor próprio baseado em navegador, com suporte mais amplo, mas ainda com restrições. Remove seletores CSS de ID e alguns pseudo-seletores.
- Yahoo Mail: Suporte moderado a CSS. Remove propriedades como
positioneoverflow. Funciona bem com layouts baseados em tabelas. - Samsung Email e outros clientes Android: Comportamento variável conforme a versão do Android. Em geral, aceitam media queries e CSS inline de forma razoável.
A referência mais atualizada para suporte de recursos por cliente é o Can I Email (caniemail.com), que funciona como o “Can I Use” do desenvolvimento web, mas voltado exclusivamente para email. Vale consultá-lo antes de usar qualquer propriedade CSS não trivial.
CSS inline vs. CSS em bloco: o que funciona no Gmail, Outlook e Apple Mail
A regra geral no desenvolvimento de email HTML é: CSS inline é o mais seguro. Estilos aplicados diretamente no atributo style de cada elemento têm o maior índice de compatibilidade entre todos os clientes, pois mesmo aqueles que removem o bloco <style> do <head> não conseguem eliminar estilos inline sem destruir o próprio elemento.
CSS em bloco (dentro de <style> no <head>) funciona bem no Apple Mail, no Gmail via web com autenticação correta e na maioria dos clientes modernos. É onde as media queries devem ser declaradas, já que não podem ser escritas inline. O problema é que o Gmail pode remover esse bloco em emails não autenticados ou encaminhados, e o Outlook desktop ignora grande parte das regras CSS em bloco de qualquer forma.
A estratégia mais eficiente combina as duas abordagens: CSS inline para todos os estilos estruturais e visuais críticos (cores, tipografia, espaçamentos, bordas), e o bloco <style> para media queries responsivas e ajustes específicos para clientes modernos. CSS externo via <link> deve ser evitado — praticamente todos os clientes de email bloqueiam arquivos CSS externos por segurança.
Estrutura base do HTML para email marketing: template do zero
Construir um template de email HTML do zero exige seguir uma sequência lógica de decisões técnicas. Cada seção da estrutura tem uma função específica, e falhas em qualquer uma delas podem comprometer a renderização em algum cliente relevante. A seguir, o passo a passo completo da estrutura base.
Declaração DOCTYPE e meta tags essenciais para compatibilidade
O DOCTYPE recomendado para emails HTML é o XHTML 1.0 Transitional, que oferece o melhor equilíbrio de compatibilidade entre clientes antigos e modernos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-BR">No bloco <head>, as meta tags essenciais são:
- Charset UTF-8:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />— garante que caracteres especiais do português (ã, ç, é) sejam exibidos corretamente. - Viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />— essencial para responsividade em dispositivos móveis. - X-UA-Compatible:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />— instrui o Internet Explorer a utilizar o motor mais atual disponível. - Format Detection:
<meta name="format-detection" content="telephone=no" />— impede que o iOS converta automaticamente números de telefone em links azuis que desestabilizam o layout.
Após as meta tags, inclua o bloco <style> com os resets básicos e as media queries. Um reset mínimo recomendado envolve zerar as margens do body, definir -webkit-text-size-adjust: 100% para evitar que o iOS aumente automaticamente o tamanho das fontes, e resetar estilos de links.
Estrutura de tabelas aninhadas: cabeçalho, corpo e rodapé
A estrutura de um email HTML profissional é composta por três tabelas principais aninhadas dentro de uma tabela “wrapper” externa. Veja a hierarquia:
- Tabela wrapper (100% de largura): Ocupa toda a largura do cliente de email e serve para centralizar o conteúdo. Recebe a cor de fundo do email — não do conteúdo em si.
- Tabela container (600px de largura): Representa o email propriamente dito. Centralizada dentro do wrapper com
align="center"oumargin: 0 auto. - Tabelas internas (cabeçalho, corpo, rodapé): Cada seção do email é uma tabela separada dentro do container, com 100% de largura relativa a ele.
Um esqueleto simplificado em código:
<body style="margin: 0; padding: 0; background-color: #f4f4f4;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<!-- Container 600px -->
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="width: 600px;">
<!-- Cabeçalho -->
<tr><td>...logo e navegação...</td></tr>
<!-- Corpo -->
<tr><td>...conteúdo principal...</td></tr>
<!-- Rodapé -->
<tr><td>...endereço e descadastro...</td></tr>
</table>
</td>
</tr>
</table>
</body>O atributo role="presentation" é relevante para acessibilidade — ele sinaliza a leitores de tela que a tabela existe para fins de layout, não para dados tabulares.
Definindo largura máxima e centralização do layout (600px)
A largura de 600px é o padrão da indústria para emails HTML por um motivo objetivo: é a largura mínima do painel de visualização na maioria dos clientes desktop, considerando que o painel lateral de pastas ocupa parte da tela. Emails mais largos que isso apresentam scroll horizontal em muitos ambientes.
Para garantir que o container de 600px seja centralizado e também se adapte a dispositivos móveis, utilize uma combinação de atributos HTML e CSS inline:
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0"
width="600" style="width: 600px; max-width: 600px; margin: 0 auto;">O atributo width="600" (sem unidade) é o valor HTML que o Outlook respeita. O style="width: 600px" atende aos demais clientes. Já o max-width: 600px permite que o layout encolha em telas menores quando combinado com media queries responsivas. Para mais detalhes sobre dimensionamento, confira o artigo sobre qual o tamanho de um email marketing.
Como adicionar imagens com fallback de texto e atributo alt
Imagens em emails HTML exigem atenção em três frentes: hospedagem, atributo alt e comportamento quando bloqueadas. Diferente de sites, as imagens de um email precisam estar hospedadas em um servidor externo — não podem ser incorporadas diretamente no HTML (exceto via Base64, o que aumenta consideravelmente o peso do arquivo e prejudica a entregabilidade).
O atributo alt descritivo deve estar presente em todas as imagens. Muitos clientes bloqueiam imagens por padrão, e o texto alternativo é o que o destinatário vê enquanto decide se habilita o carregamento. Uma imagem sem alt aparece como um espaço vazio, desperdiçando a oportunidade de transmitir a mensagem:
<img src="https://seudominio.com.br/email/banner-oferta.jpg"
alt="50% de desconto em todos os planos este mês"
width="600" height="200"
style="display: block; max-width: 100%; height: auto; border: 0;">O display: block elimina o espaço em branco que aparece abaixo de imagens inline em alguns clientes. O border: 0 remove a borda azul que o Outlook adiciona em imagens dentro de links. Definir width e height explicitamente evita que o layout “salte” enquanto as imagens carregam.
Botões de CTA em HTML puro: técnica de tabela para máxima compatibilidade
Criar botões de chamada para ação em email HTML que funcionem no Outlook é um dos maiores desafios do desenvolvimento de email. A abordagem com <a> estilizado via CSS falha no Outlook porque ele não suporta display: inline-block, border-radius ou padding em links da forma esperada.
A técnica mais confiável utiliza uma tabela para construir o botão, garantindo compatibilidade universal:
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center" bgcolor="#FF6B00" style="border-radius: 4px;">
<a href="https://seusite.com.br/oferta"
target="_blank"
style="display: inline-block; padding: 14px 32px; font-family: Arial, sans-serif;
font-size: 16px; font-weight: bold; color: #ffffff; text-decoration: none;
border-radius: 4px; background-color: #FF6B00;">
Quero aproveitar a oferta
</a>
</td>
</tr>
</table>Nessa abordagem, o bgcolor no <td> garante a cor de fundo no Outlook — que ignora o background-color CSS no link —, enquanto o background-color inline no <a> funciona para os demais clientes. O border-radius no <td> é desconsiderado pelo Outlook, que exibirá um botão com cantos retos, mas plenamente funcional. Para saber mais sobre inserção de links em emails, consulte o guia sobre como colocar link no email marketing.
Como tornar seu email marketing responsivo para dispositivos móveis
Mais de 60% dos emails são abertos em dispositivos móveis. Uma mensagem que não se adapta a telas menores perde uma parcela expressiva do potencial de engajamento. Com as técnicas adequadas, é possível criar emails que funcionam bem em qualquer resolução, mesmo dentro das limitações impostas pelos clientes de email.
Media queries em emails: onde e como usá-las corretamente
Media queries em emails funcionam apenas dentro do bloco <style> no <head> e são suportadas pelos principais clientes modernos: Apple Mail, Gmail na web, Outlook.com e a maioria dos clientes Android. O Outlook desktop as ignora completamente, o que reforça a necessidade de um layout base sólido que funcione independentemente delas.
O breakpoint mais utilizado para emails é 480px, cobrindo a maioria dos smartphones em modo retrato:
@media only screen and (max-width: 480px) {
.email-container {
width: 100% !important;
max-width: 100% !important;
}
.mobile-full-width {
width: 100% !important;
display: block !important;
}
.mobile-padding {
padding: 16px !important;
}
.mobile-font-size {
font-size: 18px !important;
line-height: 26px !important;
}
.mobile-hide {
display: none !important;
}
}O uso de !important é necessário para sobrescrever os estilos inline. Classes como mobile-full-width são aplicadas nas células de tabela que precisam se expandir para 100% em telas menores, convertendo layouts de duas colunas em coluna única. O display: block !important em células de tabela força esse comportamento.
Fontes seguras para email e como usar Google Fonts com fallback
As chamadas “web safe fonts” — instaladas na maioria dos sistemas operacionais — formam a base segura para tipografia em emails. As principais opções são:
- Arial, Helvetica, sans-serif
- Georgia, ‘Times New Roman’, serif
- Tahoma, Geneva, sans-serif
- Verdana, Geneva, sans-serif
- ‘Courier New’, Courier, monospace
Para utilizar Google Fonts com segurança, inclua o import no bloco <style> e sempre defina uma fonte de fallback. Apple Mail, Gmail na web e alguns clientes Android aceitam fontes externas; o Outlook e plataformas mais restritivas aplicarão o fallback automaticamente:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
body {
font-family: 'Inter', Arial, Helvetica, sans-serif;
}No CSS inline dos elementos, repita sempre a stack completa: style="font-family: 'Inter', Arial, Helvetica, sans-serif;". Isso garante que, mesmo em clientes que desconsideram o bloco <style>, a fonte de fallback seja aplicada corretamente.
Imagens responsivas: técnica de width 100% e max-width
Para imagens responsivas em emails, a combinação de atributos HTML e CSS inline é a abordagem mais segura:
<img src="https://seudominio.com.br/banner.jpg"
alt="Descrição da imagem"
width="600"
style="display: block; width: 100%; max-width: 600px; height: auto; border: 0;">O atributo HTML width="600" define a largura no Outlook, que ignora o CSS. O style="width: 100%" faz a imagem ocupar toda a largura disponível em clientes modernos. O max-width: 600px impede que ela ultrapasse o tamanho original em telas maiores. O height: auto preserva as proporções. Essa combinação funciona em todos os cenários relevantes sem depender de media queries para as imagens.
Ferramentas para criar HTML de email marketing sem escrever código do zero
Nem todo profissional de marketing precisa dominar HTML para produzir emails de alta qualidade. Existem ferramentas que abstraem a complexidade técnica e geram código compatível com os principais clientes de email. Conhecer as opções disponíveis permite escolher aquela que melhor se encaixa no fluxo de trabalho da equipe.
Stripo: editor drag-and-drop com exportação de HTML limpo
O Stripo (stripo.email) é uma das ferramentas mais completas do mercado para criação visual de emails HTML. Seu editor drag-and-drop permite montar layouts elaborados sem escrever código, e a exportação gera HTML limpo com CSS inline aplicado automaticamente — pronto para importar em qualquer plataforma de envio.
Entre os diferenciais do Stripo estão: biblioteca com mais de 1.400 templates gratuitos, suporte a AMP for Email, módulos de conteúdo reutilizáveis, integração direta com plataformas como Mailchimp, Klaviyo e HubSpot, e um modo de edição de código HTML para ajustes finos. O plano gratuito permite até cinco exportações por mês, suficiente para testes e projetos menores. Para uso profissional, os planos pagos eliminam as limitações de exportação a um custo acessível.
Emailify para Figma: como exportar designs diretamente para HTML de email
O Emailify é um plugin para o Figma que converte designs criados na ferramenta diretamente em HTML de email compatível com os principais clientes. É a solução mais indicada para equipes que já utilizam o Figma no processo de design e querem eliminar o trabalho manual de codificação.
O fluxo de trabalho é direto: crie o design do email no Figma seguindo as convenções de nomenclatura do Emailify — que indicam ao plugin como tratar cada elemento (texto, imagem, botão, divisor) — e execute a exportação. O plugin gera o HTML com CSS inline, estrutura de tabelas e responsividade básica. O resultado nem sempre é perfeito e pode exigir ajustes manuais para casos específicos do Outlook, mas reduz consideravelmente o tempo de desenvolvimento. O Emailify é pago, com planos por projeto ou assinatura mensal.
Editores de HTML online: MediaPost e alternativas gratuitas
Para quem prefere trabalhar diretamente no código, mas quer um ambiente mais amigável do que um editor de texto local, algumas opções online se destacam. O Parcel.io é o mais recomendado atualmente: trata-se de um editor de código HTML para email com preview em tempo real, suporte a preprocessadores CSS, snippets específicos para email e colaboração em equipe. O plano gratuito é generoso para uso individual.
Outras alternativas relevantes:
- CodePen: Não é específico para email, mas permite criar e visualizar HTML/CSS rapidamente. Útil para testar trechos de código isolados antes de incorporá-los ao template completo.
- JSFiddle e JSBin: Mesma proposta do CodePen, com interfaces distintas. Adequados para validações rápidas de código.
- Topol.io: Editor drag-and-drop com exportação de HTML limpo, similar ao Stripo. Tem plano gratuito com limitações e é uma alternativa interessante para quem prioriza simplicidade.
Como usar templates HTML prontos e personalizá-los
Partir de um template HTML já estruturado é a abordagem mais eficiente para a maioria dos profissionais de marketing. Você ganha uma base testada e compatível, precisando apenas adaptar o conteúdo e a identidade visual da marca. O diferencial está em saber onde encontrar templates confiáveis e como editá-los sem comprometer a estrutura.
Onde encontrar templates HTML gratuitos e confiáveis
As melhores fontes de templates HTML gratuitos para email são:
- Stripo Template Library: Mais de 1.400 templates gratuitos, organizados por categoria (promoção, newsletter, boas-vindas, abandono de carrinho). Todos são testados nos principais clientes de email e podem ser exportados como HTML limpo.
- Mailchimp Templates: A Mailchimp disponibiliza seus templates básicos publicamente no GitHub (repositório “email-blueprints”). São opções simples, bem documentadas e altamente compatíveis — ótimas como ponto de partida.
- Cerberus: Framework de templates de email responsivo e open source, disponível gratuitamente no GitHub (tedgoas/cerberus). Oferece três variações (fluido, híbrido e responsivo) com código comentado e explicado.
- Really Good Emails: Não disponibiliza o código-fonte diretamente, mas é uma galeria curada com referências dos melhores emails do mercado. Excelente para inspiração visual antes de personalizar um template.
- HTML Email Templates (leemunroe/responsive-html-email-template): Repositório GitHub com templates simples, responsivos e bem comentados. Um ponto de partida limpo para quem quer entender a estrutura antes de customizá-la.
Como editar um template HTML de email sem quebrar a estrutura
Editar um template HTML de email exige cuidado, pois a estrutura de tabelas aninhadas é frágil — remover uma tag de fechamento ou alterar um atributo crítico pode quebrar o layout em algum cliente específico. As práticas a seguir tornam as edições mais seguras:
Edite apenas o conteúdo, não a estrutura. Substitua textos, imagens e cores sem alterar a hierarquia de tabelas. Se for necessário adicionar uma nova seção, copie uma célula existente e modifique o conteúdo, em vez de criar uma nova estrutura do zero.
Use um editor com destaque de sintaxe. O Visual Studio Code com a extensão “HTML CSS Support” é a escolha mais comum. O destaque de sintaxe facilita identificar tags abertas e fechadas, reduzindo erros estruturais.
Mantenha o CSS inline intacto. Ao ajustar cores e tipografia, modifique os valores no atributo style de cada elemento individualmente. O mesmo estilo pode estar aplicado em múltiplos elementos ao longo do template.
Teste após cada alteração significativa. Evite acumular dez mudanças antes de verificar o resultado. Testar após cada bloco de alterações facilita identificar rapidamente o que introduziu algum
