Aprender como fazer email marketing em HTML é essencial para quem quer criar campanhas profissionais e com melhor taxa de entrega. Diferente dos construtores visuais, o HTML permite controle total sobre o design, compatibilidade com diferentes clientes de email e redução de problemas de renderização que prejudicam a conversão. Se você trabalha com geração de leads ou precisa manter contato direto com potenciais clientes, dominar essa técnica transforma seus resultados.
A construção de emails em HTML puro oferece vantagens significativas: templates mais leves, melhor performance em dispositivos móveis e menos chances de seus mensagens caírem na pasta de spam. Além disso, integrar seus emails com plataformas de automação e rastreamento de conversão fica muito mais simples quando você entende a estrutura básica da linguagem. Muitas empresas que investem em tráfego pago e landing pages também negligenciam a qualidade de seus emails, deixando conversões no caminho.
Neste guia, você aprenderá a estrutura fundamental do HTML para email marketing, as melhores práticas de compatibilidade entre navegadores e clientes de email, e como otimizar suas campanhas para gerar resultados reais. Vamos direto ao ponto, sem complicações desnecessárias.
O que é email marketing em HTML e por que usar em vez de texto simples
Email marketing em HTML é uma mensagem eletrônica construída com linguagem de marcação, que oferece controle total sobre layout, tipografia, cores, imagens e botões de ação. Diferente de um email em texto simples — que entrega apenas caracteres sem formatação —, o HTML transforma a caixa de entrada em um canal visual tão rico quanto uma página web, capaz de reforçar a identidade da marca e conduzir o leitor até a conversão.
A diferença prática é considerável. Um email em texto simples pode ter taxas de abertura ligeiramente superiores em campanhas de relacionamento muito pessoal, mas perde completamente em capacidade de comunicar promoções, lançamentos de produto ou newsletters com múltiplos conteúdos. O HTML viabiliza hierarquia visual clara: título em destaque, imagem do produto, bloco de benefícios, botão em cor contrastante — tudo em sequência lógica que conduz o olhar do leitor.
Do ponto de vista de rastreamento, mensagens em HTML suportam o pixel de abertura (uma imagem transparente de 1×1 px inserida no código), que é a base da métrica de taxa de abertura de email marketing. Sem HTML, essa mensuração simplesmente não existe. Além disso, links com UTMs embutidos permitem rastrear cada clique no Google Analytics, conectando a campanha diretamente às metas de conversão.
Outro aspecto relevante: emails bem construídos em HTML transmitem profissionalismo e credibilidade. Para pequenas e médias empresas que disputam atenção na caixa de entrada com grandes marcas, um layout bem executado nivela o campo de jogo — especialmente quando o código segue boas práticas de entregabilidade e compatibilidade entre diferentes clientes de email.
Estrutura básica de um email HTML: o esqueleto que todo cliente de email aceita
Antes de qualquer elemento visual, o email HTML precisa de uma estrutura de código interpretada corretamente pelo Gmail, Outlook, Apple Mail, Yahoo Mail e dezenas de outros clientes. O desafio é que esses programas não renderizam HTML como um navegador moderno: cada um possui seu próprio motor, com suporte parcial a CSS e comportamentos imprevisíveis. Por isso, o esqueleto do email segue convenções específicas que diferem radicalmente do desenvolvimento web tradicional.
Por que usar tabelas em vez de divs no HTML de email
No desenvolvimento web atual, tabelas para layout são consideradas má prática. Em email marketing, são indispensáveis. O motivo é direto: clientes como o Outlook (especialmente as versões 2007–2019) utilizam o motor de renderização do Microsoft Word para processar HTML, e esse motor ignora propriedades CSS modernas como flexbox, grid e até mesmo float de forma consistente. Divs com CSS posicionado quebram o layout em vários ambientes.
Tabelas funcionam porque são elementos HTML nativos com comportamento de layout intrínseco, independente de CSS externo. A estrutura básica usa uma tabela externa com width="100%" (para ocupar toda a área disponível) contendo uma tabela interna centralizada com largura fixa de 600px — o container principal da mensagem.
Cada seção do email (cabeçalho, corpo, rodapé) corresponde a uma linha de tabela (<tr>) com células (<td>). Colunas lado a lado são células adjacentes na mesma linha. Esse modelo, embora verboso, garante que o layout se comporte de forma previsível em mais de 95% dos clientes de email do mercado.
Declaração DOCTYPE e meta tags essenciais para compatibilidade
O HTML de email começa com declarações que orientam os clientes sobre como interpretar o documento. O DOCTYPE recomendado é o HTML5 (<!DOCTYPE html>), amplamente aceito e que evita que o Outlook entre em modo de compatibilidade legado. A tag <html> deve incluir o atributo lang="pt-BR" para acessibilidade e correta interpretação de caracteres.
No bloco <head>, algumas meta tags são indispensáveis:
<meta charset="UTF-8">— garante que acentos e caracteres especiais do português sejam exibidos corretamente.<meta name="viewport" content="width=device-width, initial-scale=1.0">— ativa o comportamento responsivo em clientes mobile que suportam media queries.<meta http-equiv="X-UA-Compatible" content="IE=edge">— força o Internet Explorer (usado internamente pelo Outlook) a utilizar seu motor mais recente.<meta name="format-detection" content="telephone=no">— impede que clientes iOS convertam automaticamente números de telefone em links clicáveis, o que pode quebrar o layout.
Além disso, uma tag <style> no <head> pode conter resets básicos e media queries para responsividade — mas todo estilo crítico de layout deve ser replicado inline, pois alguns clientes removem esse bloco ao exibir a mensagem.
Inline CSS: como e por que aplicar estilos diretamente nas tags
Inline CSS significa escrever os estilos diretamente no atributo style de cada elemento HTML, como <td style="background-color:#ffffff; padding:20px; font-family:Arial, sans-serif;">. Essa abordagem é obrigatória em email marketing porque clientes como o Gmail removem completamente o bloco <style> do <head> ao renderizar a mensagem, tornando qualquer regra definida ali ineficaz.
As propriedades CSS mais utilizadas inline em email são: font-family, font-size, color, background-color, padding, margin, text-align, line-height, border e width. Evite propriedades como display:flex, position:absolute e border-radius em elementos críticos de layout — o suporte é inconsistente entre os clientes.
Escrever inline CSS manualmente em um email complexo é trabalhoso. A solução mais prática é desenvolver o email com CSS em bloco <style> e usar uma ferramenta de inlining — como o Juice, disponível via linha de comando, ou o inliner integrado em plataformas como Mailchimp e RD Station — que converte automaticamente todas as regras para inline antes do envio.
Passo a passo: como criar um email marketing em HTML do zero
Criar um email HTML do zero exige seguir uma sequência lógica: estrutura antes de estilo, conteúdo antes de detalhes visuais. O processo abaixo cobre cada etapa com as decisões técnicas que impactam diretamente compatibilidade e conversão.
1. Defina a largura máxima (600px) e o container principal
A largura de 600px é o padrão consolidado da indústria. Ela garante que o conteúdo seja exibido sem scroll horizontal na maioria dos clientes desktop, permanecendo legível em telas menores quando o design é responsivo. Larguras maiores — 700px ou 800px — causam corte de conteúdo no Outlook e em webmails com painéis laterais.
O container principal é construído com duas tabelas aninhadas. A tabela externa tem width="100%" e serve como fundo, onde se define a cor de fundo do email. A tabela interna recebe width="600" (valor numérico sem “px” no atributo HTML, para compatibilidade com o Outlook) e align="center". No CSS inline da tabela interna, adicione também max-width:600px; width:100%; para que ela se ajuste em telas menores que 600px.
2. Monte o cabeçalho com logo e cores da marca
O cabeçalho é a primeira impressão visual da mensagem. Deve conter o logotipo da empresa centralizado ou alinhado à esquerda, sobre um fundo com a cor primária da marca. Use uma <td> com background-color inline e padding generoso — entre 20px e 30px verticalmente.
A imagem do logo deve ter o atributo alt preenchido com o nome da empresa, width e height definidos (para evitar deslocamento de layout quando imagens são bloqueadas) e display:block para eliminar o espaço fantasma que alguns clientes adicionam abaixo de imagens inline. Hospede o logo em um servidor confiável com HTTPS — imagens em servidores sem SSL são bloqueadas por vários clientes de email.
3. Crie o corpo do email com texto, imagens e CTA
O corpo é onde a mensagem acontece de fato. A estrutura mais eficaz é uma sequência vertical de blocos: título principal, parágrafo de abertura, imagem de suporte, lista de benefícios ou pontos-chave, e botão de ação. Cada bloco corresponde a uma nova linha de tabela (<tr>) com sua própria célula (<td>).
O botão merece atenção especial. A abordagem mais compatível é o botão em tabela (também chamado de “bulletproof button”): uma tabela com fundo colorido, borda arredondada via VML para Outlook, e um link <a> com padding inline. Evite usar imagens como botões — se forem bloqueadas, o elemento de ação desaparece completamente. Para entender como estruturar links eficazes dentro do email, consulte este guia sobre como colocar link no email marketing.
Os textos devem ter font-size mínimo de 14px para leitura confortável, com line-height entre 1.4 e 1.6. Títulos podem usar entre 22px e 28px. Mantenha parágrafos curtos e use negrito para destacar informações críticas.
4. Adicione o rodapé com link de descadastro e informações legais
O rodapé é obrigatório tanto do ponto de vista legal quanto de entregabilidade. Deve conter: nome e endereço físico da empresa (exigido pela legislação anti-spam de vários países e pela LGPD no contexto brasileiro), link de descadastro funcional, e opcionalmente links para redes sociais e política de privacidade.
O link de descadastro precisa ser visível — não use texto minúsculo em cor quase invisível. Filtros de spam de provedores como Gmail e Yahoo avaliam a presença e a acessibilidade desse elemento. Plataformas de envio geralmente o inserem automaticamente, mas ao importar HTML personalizado, confirme que o placeholder da plataforma está corretamente posicionado no rodapé.
Estilize o rodapé com fundo neutro (cinza claro ou branco), texto em cor suave (#666666 ou similar) e font-size entre 11px e 12px — menor que o corpo, mas ainda legível.
5. Teste o HTML antes de disparar
Nunca dispare um email HTML sem testá-lo em múltiplos clientes. O processo inclui: validar o código em um linter específico para email (como o da Litmus), enviar uma versão de teste para contas reais no Gmail, Outlook e Apple Mail, verificar a renderização em dispositivos móveis e confirmar que todos os links estão funcionando. Esse passo é detalhado na seção específica sobre testes mais adiante neste artigo.
Antes do disparo final, também é essencial revisar o assunto, o pré-header (o texto de preview que aparece após o assunto na caixa de entrada) e confirmar que as UTMs estão corretamente anexadas a todos os links rastreáveis. Para entender o processo completo de envio, veja como disparar email marketing de forma eficiente.
Como tornar seu email HTML responsivo para dispositivos móveis
Mais de 60% dos emails são abertos em dispositivos móveis, segundo dados consistentes da indústria. Uma mensagem que quebra no smartphone — com texto minúsculo, imagens cortadas ou botões impossíveis de tocar — perde a conversão e pode elevar a taxa de descadastro. A responsividade em email, porém, funciona de forma diferente do desenvolvimento web responsivo tradicional.
Media queries em email: o que funciona e o que não funciona
Media queries em email são suportadas pelo Apple Mail, iOS Mail, Samsung Email e pela maioria dos clientes modernos — mas não pelo Gmail em modo webmail (quando o usuário acessa gmail.com pelo navegador) nem pelo Outlook. Isso significa que não é possível depender exclusivamente delas para garantir responsividade.
A estratégia correta é combinar duas abordagens: design fluido (que funciona sem media queries) como base, e media queries como aprimoramento progressivo para clientes que as suportam. As mais úteis em email são:
@media only screen and (max-width: 600px)— para ajustes em smartphones.- Dentro dessa media query: aumentar font-size para no mínimo 16px, converter colunas lado a lado em blocos empilhados (
display:block; width:100%!), e ampliar botões para pelo menos 44px de altura (área de toque confortável). - Usar
!importantnas declarações dentro de media queries para sobrescrever os estilos inline.
Para o Gmail e o Outlook, onde media queries não funcionam, o design fluido garante que o email pelo menos não quebre — mesmo sem otimização perfeita para mobile.
Imagens fluidas e técnica de tabelas aninhadas para mobile
Imagens fluidas são definidas com width="100%" no atributo HTML e max-width:600px; width:100%; no CSS inline. Isso faz com que a imagem ocupe toda a largura do container em telas pequenas, sem ultrapassar 600px em telas maiores. O atributo height deve ser omitido ou definido como auto para preservar a proporção original.
Para layouts de múltiplas colunas — como dois blocos de conteúdo lado a lado —, a técnica mais robusta é usar tabelas aninhadas com align="left" nas células internas, combinada com larguras em porcentagem. Em clientes que suportam media queries, essas colunas são empilhadas verticalmente com display:block; width:100%!. Nos demais, flutuam lado a lado de forma aceitável.
Uma alternativa mais moderna é a técnica Hybrid/Spongy, que utiliza display:inline-block nas células de coluna com larguras máximas definidas. Ela oferece comportamento semi-responsivo mesmo sem media queries, funcionando razoavelmente bem no Gmail.
Boas práticas de HTML para email marketing que aumentam entregabilidade
Entregabilidade é a capacidade do email chegar à caixa de entrada principal — e não à pasta de spam. Ela depende de reputação de domínio, configurações de autenticação (SPF, DKIM, DMARC) e, diretamente, da qualidade do código HTML. Mensagens com código malfeito ou com padrões associados a spam têm maior probabilidade de ser filtradas, independentemente da reputação do remetente.
Proporção texto-imagem ideal para evitar filtros de spam
Filtros de spam de provedores como Gmail e Outlook avaliam a proporção entre texto e imagens na mensagem. Emails compostos majoritariamente por imagens — o caso extremo é um único JPG com todo o conteúdo — são tratados com suspeita, pois spammers usam essa técnica para esconder palavras-chave dos filtros. A proporção recomendada é de pelo menos 60% texto e 40% imagens, com muitos especialistas sugerindo 80/20 para campanhas transacionais.
Na prática, isso significa que o conteúdo principal — título, corpo do texto, botão de ação — deve ser HTML real, não imagem. Use recursos visuais apenas para ilustrações, banners decorativos e fotos de produto, sempre acompanhados de texto equivalente ao redor.
Atributo alt em todas as imagens e fallback de cor de fundo
Muitos clientes de email bloqueiam imagens por padrão, exibindo apenas o texto alternativo. Se o atributo alt estiver vazio ou ausente, o leitor vê um espaço em branco sem contexto. Preencha-o de forma descritiva: alt="Promoção: 30% de desconto em todos os planos até sexta-feira" comunica a mensagem mesmo quando a imagem não carrega.
Além do alt, defina uma cor de fundo (background-color) na célula de tabela que contém a imagem. Quando ela é bloqueada, o fundo colorido mantém a estrutura visual e indica ao leitor que há conteúdo ali. Para banners com texto sobreposto à imagem, essa prática é especialmente importante — o texto HTML deve estar em uma célula separada, nunca embutido na imagem.
Fontes seguras para email e como usar web fonts com fallback
As web-safe fonts são fontes presentes na maioria dos sistemas operacionais e garantidas em praticamente todos os clientes de email: Arial, Helvetica, Georgia, Times New Roman, Courier New, Verdana e Trebuchet MS. Utilizá-las assegura consistência visual total.
Web fonts (como as do Google Fonts) funcionam no Apple Mail, iOS Mail e alguns webmails, mas não no Outlook nem no Gmail. Para usá-las com segurança, declare-as no bloco <style> do <head> com @import ou <link>, e sempre defina um stack de fallback no font-family inline: font-family: 'Montserrat', Arial, Helvetica, sans-serif;. Clientes que não carregam a web font utilizarão automaticamente a próxima opção da lista.
Tamanho máximo do arquivo HTML e otimização de imagens
O Gmail impõe um limite de 102KB para o HTML do email. Acima disso, a mensagem é “clipped” (cortada) e o leitor vê um link “Ver mensagem completa” — o que praticamente elimina qualquer chance de conversão. Manter o HTML abaixo de 80KB garante uma margem de segurança confortável.
Para reduzir o tamanho do arquivo: remova comentários desnecessários, evite CSS duplicado e nunca inline imagens em base64 (isso infla o HTML de forma drástica). As imagens devem ser hospedadas externamente e referenciadas por URL. Antes do upload, otimize-as: use JPEG para fotos (qualidade entre 70% e 80%), PNG para elementos com transparência, e comprima tudo com ferramentas como TinyPNG ou Squoosh. O tamanho ideal de um banner é inferior a 100KB. Para mais detalhes sobre dimensionamento, consulte o guia sobre qual o tamanho de um email marketing.
Ferramentas para criar email marketing em HTML sem escrever código do zero
Escrever HTML de email do zero é viável para desenvolvedores experientes, mas desnecessário para a maioria das equipes de marketing. Ferramentas especializadas geram código compatível e testado, acelerando o processo de criação sem comprometer a qualidade técnica.
Stripo: editor drag-and-drop com exportação de HTML limpo
O Stripo é uma das ferramentas mais completas para criação de email HTML sem necessidade de código. Seu editor visual drag-and-drop permite montar layouts complexos com blocos pré-construídos — cabeçalho, imagem, texto, botão, divisor, redes sociais —, enquanto o HTML gerado em segundo plano segue boas práticas de compatibilidade com Outlook e clientes mobile.
O diferencial da plataforma é a exportação do HTML limpo e inline, pronto para importação em qualquer ESP. Ela também oferece integração direta com Mailchimp, HubSpot, Klaviyo e outras ferramentas. O plano gratuito permite criar até cinco templates por mês, suficiente para testes e projetos menores. A versão paga adiciona testes de spam, prévia em múltiplos clientes e colaboração em equipe.
Emailify para Figma: do design ao HTML em poucos cliques
Para equipes que já utilizam o Figma no processo de design, o plugin Emailify é uma solução elegante. Ele permite criar o layout do email diretamente no ambiente que a equipe já domina e exportar o HTML compatível com um único clique, sem necessidade de recodificação manual.
O Emailify reconhece componentes específicos — botões, imagens, colunas — e os converte para a estrutura de tabelas correta. Também gera versões responsivas automaticamente e oferece exportação direta para plataformas como Mailchimp e Campaign Monitor. É uma ferramenta paga (assinatura mensal), mas o ganho de produtividade para equipes com designers dedicados justifica o investimento.
Locaweb Email Marketing: criando e disparando mensagens HTML pela plataforma
A Locaweb Email Marketing é uma ESP brasileira com editor de templates HTML integrado, que aceita tanto código personalizado quanto o construtor visual. Para quem precisa criar e disparar emails em uma única plataforma sem depender de ferramentas externas, é uma opção acessível com suporte em português.
A plataforma cuida automaticamente da inserção do pixel de rastreamento, do link de descadastro e da gestão de bounces — tarefas que precisariam ser realizadas manualmente em um HTML puro. Relatórios de abertura, cliques e descadastros ficam disponíveis diretamente no painel.
RD Station e outras ESPs: como importar seu HTML personalizado
O RD Station Marketing, amplamente adotado no mercado brasileiro, permite importar HTML personalizado diretamente no módulo de email. O processo é simples: no criador de email, selecione a opção “HTML” ou “Código”, cole ou faça upload do arquivo, e a plataforma injeta automaticamente os tokens de personalização (nome do contato, link de descadastro) nos locais indicados por placeholders.
O mesmo fluxo se aplica a ESPs internacionais como Mailchimp, ActiveCampaign e Klaviyo. O ponto de atenção é garantir que o HTML importado não ultrapasse os limites de tamanho da plataforma e que os placeholders de descadastro estejam corretamente posicionados. Para comparar as principais opções disponíveis, veja este guia sobre qual o melhor email marketing para diferentes necessidades.
Como testar seu email HTML antes de enviar para a base
Testar é a etapa que separa campanhas profissionais de disparos amadores. Um email que quebra no Outlook — ainda responsável por parcela significativa dos clientes corporativos — pode comprometer a credibilidade de uma campanha inteira. O processo de teste deve ser sistemático e cobrir tanto a renderização visual quanto os aspectos técnicos de entregabilidade.
Ferramentas de preview: Litmus, Email on Acid e alternativas gratuitas
O Litmus e o Email on Acid são as referências do mercado para teste de renderização. Ambas permitem visualizar como o email será exibido em mais de 90 combinações de clientes e sistemas operacionais — incluindo todas as versões do Outlook, Gmail em diferentes contextos, Apple Mail, Samsung Email e clientes mobile. O processo é direto: envie um email de teste para um endereço fornecido pela ferramenta, e ela gera screenshots reais de cada cliente em segundos.
Para equipes com orçamento limitado, existem alternativas gratuitas ou de baixo custo:
- Mail-tester.com — analisa entregabilidade e pontuação de spam gratuitamente.
- Testi.at — oferece previews gratuitos limitados em alguns clientes principais.
- Envio manual para contas próprias — crie contas no Gmail, Outlook.com e Yahoo Mail e envie testes para todas elas antes do disparo.
- Previews integrados nas ESPs — plataformas como Mailchimp e RD Station oferecem preview básico integrado, suficiente para verificações rápidas.
Checklist de testes: Gmail, Outlook, Apple Mail e clientes mobile
Use este checklist antes de qualquer disparo para garantir que o email está tecnicamente correto:
- Gmail (web e app Android/iOS): verificar se o layout não quebrou, se as imagens carregam, se o texto de fallback aparece quando imagens são bloqueadas e se a mensagem não foi para spam.
- Outlook 2016/2019/365: checar alinhamento de colunas, renderização de botões (usar VML bulletproof) e se as fontes personalizadas caíram corretamente para o fallback.
- Apple Mail (macOS e iOS): verificar responsividade, web fonts e dark mode (o Apple Mail aplica inversão de cores automaticamente — confirme que o email permanece legível).
- Mobile geral: confirmar font-size mínimo de 16px em dispositivos móveis, botões com pelo menos 44px de altura e ausência de scroll horizontal.
- Links: clicar em todos os links e confirmar que direcionam para as URLs corretas com UTMs intactas.
- Assunto e pré-header: verificar se aparecem corretamente na caixa de entrada, sem cortes indesejados (assunto até ~50 caracteres, pré-header até ~90 caracteres).
- Personalização: confirmar que os tokens (ex:
{{nome}}) foram substituídos corretamente e que não há tokens “quebrados” visíveis. - Score de spam: rodar o HTML no Mail-tester.com e garantir pontuação acima de 8/10.
Exemplos de email marketing em HTML que convertem (e o que aprender com eles)
Analisar emails de alta performance é uma das formas mais eficientes de aprender o que funciona na prática. Os três tipos a seguir têm estruturas distintas, cada uma otimizada para um objetivo específico de conversão.
Email promocional: estrutura de oferta com CTA destacado
O email promocional tem um único objetivo: levar o leitor ao clique. Sua estrutura é direta e sem distrações. O layout mais eficaz segue esta sequência:
- Cabeçalho: logo da marca sobre fundo na cor primária, sem elementos extras.
- Banner hero: imagem de impacto com a oferta principal (ex: “50% OFF — Somente hoje”), com
