Saber como criar um e-mail marketing em HTML transforma mensagens simples em comunicações muito mais profissionais e estratégicas.
Aqui na Central Dicas, percebemos que muita gente trava nessa etapa por acreditar que precisa dominar programação para criar campanhas bonitas e responsivas. Na prática, entender alguns fundamentos já ajuda bastante.
Usar um bom gerador de HTML para e-mail também pode facilitar o processo, principalmente para quem quer focar mais no design e no conteúdo do que na codificação manual.
A personalização vai muito além de colocar o nome do destinatário. Cores, imagens, botões, espaçamento, hierarquia visual e chamadas para ação influenciam diretamente na experiência de leitura.
Neste guia, vamos mostrar como estruturar um e-mail marketing em HTML, quais elementos utilizar e o que evitar para aumentar a compatibilidade entre Gmail, Outlook, celulares e outros clientes de e-mail.
O código certo para construir um e-mail marketing
Para entender como criar um e-mail marketing em HTML, é importante saber que a estrutura utilizada em e-mails é diferente de um site moderno.
Enquanto páginas atuais utilizam bastante Flexbox, Grid e estruturas complexas com <div>, os e-mails ainda dependem bastante de tabelas e estilos aplicados diretamente nos elementos.
Uma estrutura básica costuma utilizar:
| Elemento | Função principal | Boa prática |
|---|---|---|
| Tabelas | Estrutura do layout | Utilize para organizar o conteúdo |
| CSS inline | Estilização visual | Priorize para maior compatibilidade |
| Media queries | Ajustes para celular | Utilize para melhorar a responsividade |
| Imagens | Apoio visual | Sempre utilize URLs públicas |
| Botões HTML | Chamadas para ação | Prefira código em vez de imagem |
Dominar essa base é importante para quem pretende trabalhar com e-mail marketing de maneira mais profissional.
Um erro comum entre iniciantes é tentar construir o e-mail exatamente como uma página de site.
Clientes de e-mail possuem diferentes motores de renderização e nem todos aceitam os mesmos recursos.
Por isso, quando o assunto é e-mail marketing, simplicidade e compatibilidade costumam valer mais do que efeitos visuais muito avançados.
A estrutura baseada em tabelas
No desenvolvimento de e-mails, as tabelas continuam sendo uma das formas mais utilizadas para estruturar o conteúdo.
Tags como:
<table>
<tr>
<td>
ajudam a organizar linhas, colunas, imagens, textos e botões.
O conteúdo principal geralmente fica dentro de uma estrutura centralizada, com uma largura máxima adequada para desktop e adaptação para dispositivos menores.
Uma largura próxima de 600 px é bastante utilizada em templates de e-mail.
Isso não significa que todo o conteúdo precise ficar fixo nesse tamanho. A estrutura externa pode utilizar width="100%", enquanto o conteúdo interno possui uma largura máxima.
Por que utilizar tabelas?
A principal vantagem é a compatibilidade.
Alguns clientes de e-mail possuem limitações importantes na interpretação de CSS moderno. Uma estrutura baseada em tabelas reduz o risco de elementos ficarem desalinhados ou completamente diferentes do projeto original.
Dica da Central Dicas: Pense no HTML de e-mail de forma diferente do HTML de um site. O objetivo principal não é utilizar a tecnologia mais moderna, mas criar uma mensagem que seja exibida corretamente para o maior número possível de pessoas.
CSS inline continua sendo muito importante
No e-mail marketing, muitos estilos são aplicados diretamente dentro da própria tag utilizando o atributo style.
Por exemplo:
style="font-size:16px; color:#222222;"
Essa abordagem é conhecida como CSS inline.
Mesmo que alguns clientes de e-mail aceitem estilos declarados no cabeçalho, utilizar CSS inline em elementos importantes ajuda a melhorar a compatibilidade.
É comum precisar definir diretamente:
- Fonte;
- Tamanho do texto;
- Cor;
- Espaçamento;
- Alinhamento;
- Fundo;
- Bordas;
- Padding;
- Altura da linha.
Isso pode deixar o código mais repetitivo, mas aumenta o controle sobre a apresentação.
Evite depender de recursos visuais muito avançados
Nem todas as propriedades CSS utilizadas em sites funcionam corretamente em e-mails.
Por isso, tenha cuidado com:
- Animações complexas;
- JavaScript;
- Layouts baseados somente em Flexbox;
- Grid;
- Filtros avançados;
- Alguns tipos de degradê;
- Efeitos muito complexos de sombra;
- Elementos interativos não suportados.
Quando possível, utilize cores sólidas, fontes comuns e estruturas simples.
O objetivo é garantir que a mensagem continue compreensível mesmo quando algum recurso visual não for carregado.
Adaptação para telas pequenas
Um e-mail precisa funcionar bem no celular.
Grande parte das pessoas acessa a caixa de entrada através de smartphones, então criar uma mensagem que só funciona bem no computador pode prejudicar bastante a experiência.
Uma estratégia comum é utilizar:
width="100%"
nas tabelas externas e limitar apenas o conteúdo interno.
Também é possível utilizar media queries para modificar determinados estilos em telas menores.
Por exemplo, em dispositivos móveis você pode:
- Aumentar o tamanho das fontes;
- Fazer colunas ficarem uma abaixo da outra;
- Aumentar os botões;
- Reduzir espaçamentos;
- Ajustar imagens;
- Fazer elementos ocuparem 100% da largura disponível.
Imagens responsivas
Uma imagem pode utilizar:
width:100%;
e:
height:auto;
para se adaptar proporcionalmente ao espaço disponível.
É importante evitar imagens maiores do que a área do e-mail, principalmente em dispositivos móveis.
Pense também na área de toque
No computador, o usuário utiliza um mouse.
No celular, ele utiliza o dedo.
Isso significa que links e botões muito pequenos podem dificultar bastante a navegação.
Por isso, os principais botões devem ter:
- Bom espaçamento interno;
- Texto legível;
- Contraste;
- Área de toque confortável;
- Distância adequada de outros links.
Imagens e caminhos absolutos
As imagens utilizadas no e-mail precisam estar disponíveis em um endereço público na internet.
Em vez de utilizar um caminho local como:
/imagens/banner.jpg
utilize uma URL completa, como:
Esse formato é conhecido como caminho absoluto.
Também é recomendado utilizar imagens hospedadas em servidores com HTTPS.
Nunca esqueça do texto alternativo
Toda imagem importante deve utilizar o atributo alt.
Esse texto pode aparecer quando a imagem não é carregada.
Por exemplo:
alt="Conheça nossa nova oferta"
Isso é especialmente importante porque alguns usuários ou aplicativos de e-mail podem bloquear imagens automaticamente.
Mesmo sem o banner carregado, o destinatário ainda consegue compreender parte do contexto.
Otimize o peso das imagens
Evite inserir imagens extremamente pesadas.
Arquivos grandes podem:
- Demorar para carregar;
- Consumir mais dados móveis;
- Prejudicar a experiência;
- Fazer o usuário abandonar a mensagem.
Antes de utilizar uma imagem, tente equilibrar qualidade e tamanho do arquivo.
Tipografia e fontes seguras
A escolha da fonte também influencia a compatibilidade.
Fontes como:
- Arial;
- Helvetica;
- Georgia;
- Times New Roman;
- Verdana;
- Tahoma;
são normalmente consideradas opções seguras.
Você também pode definir uma sequência de fontes.
Por exemplo:
font-family: Arial, Helvetica, sans-serif;
Dessa forma, se a primeira fonte não estiver disponível, o sistema tenta utilizar a próxima.
Qual tamanho de fonte utilizar?
Para textos principais, utilizar um tamanho confortável ajuda bastante na leitura.
Algo em torno de 16 px costuma funcionar bem como ponto de partida para o corpo do conteúdo.
Além do tamanho, ajuste também o espaçamento entre linhas.
Evite:
- Textos muito pequenos;
- Parágrafos enormes;
- Pouco contraste;
- Linhas excessivamente próximas.
A leitura precisa ser confortável tanto no computador quanto no celular.
Botões feitos com HTML
Uma chamada para ação não precisa ser uma imagem.
Na maioria dos casos, é melhor construir o botão utilizando HTML e CSS.
Isso traz algumas vantagens:
- Carregamento mais rápido;
- Texto continua aparecendo sem imagens;
- Maior facilidade para alterar a mensagem;
- Melhor área clicável;
- Maior adaptação entre dispositivos.
Um botão pode conter textos como:
Saiba mais
Conheça agora
Ver detalhes
Acessar conteúdo
Baixar material
A chamada deve indicar claramente o que acontecerá depois do clique.
Posicionamento do botão
Se existe uma ação principal na mensagem, ela precisa ficar fácil de encontrar.
Dependendo do tamanho do e-mail, você pode utilizar uma chamada no início e outra mais abaixo.
Entretanto, evite transformar a mensagem em uma sequência de botões competindo pela atenção.
Defina uma ação principal.
Código limpo ajuda na qualidade da mensagem
E-mails HTML devem evitar recursos que podem ser bloqueados pelos clientes de e-mail.
Evite principalmente:
- JavaScript;
- Formulários complexos incorporados;
- Scripts externos;
- Conteúdo oculto sem necessidade;
- Vídeos em autoplay;
- Código desnecessariamente complexo.
O foco deve ser uma estrutura simples, previsível e compatível.
Também é importante entender o que precisa ter em um e-mail marketing para equilibrar conteúdo, design e chamada para ação.
Não transforme todo o e-mail em uma imagem
Utilizar somente uma grande imagem contendo todos os textos é uma prática ruim.
Além de prejudicar acessibilidade, o conteúdo pode ficar praticamente inutilizável quando as imagens são bloqueadas.
Prefira combinar:
- Texto real;
- Imagens;
- Títulos;
- Botões HTML;
- Links.
Dessa maneira, a mensagem continua fazendo sentido mesmo sem todas as imagens carregadas.
Testes de visualização são indispensáveis
O fato de seu e-mail estar perfeito no navegador não significa que ficará igual em todas as caixas de entrada.
Antes de realizar uma campanha, envie testes para diferentes serviços.
Por exemplo:
- Gmail;
- Outlook;
- Yahoo;
- Apple Mail.
Teste também em:
- Computador;
- Android;
- iPhone;
- Tela pequena;
- Tela grande.
Observe se:
- As imagens carregam;
- O texto está legível;
- Os botões funcionam;
- Os links estão corretos;
- As colunas não quebram;
- O conteúdo não ultrapassa a tela.
Lembre-se do modo escuro
O Dark Mode pode modificar cores de fundo e texto dependendo do aplicativo utilizado.
Por isso, verifique também como sua campanha fica com o modo escuro ativado.
Tenha atenção especial com:
- Logos escuros;
- Imagens transparentes;
- Texto preto sobre fundo transparente;
- Ícones;
- Bordas.
Um logotipo preto transparente, por exemplo, pode perder bastante visibilidade quando colocado sobre um fundo escuro.
Peso do arquivo HTML
O tamanho do próprio código também merece atenção.
E-mails excessivamente grandes podem ser cortados por alguns serviços, fazendo com que uma parte da mensagem fique escondida atrás de opções como “visualizar mensagem completa”.
Para evitar isso:
- Remova código desnecessário;
- Evite copiar conteúdos diretamente de editores que adicionam formatações ocultas;
- Não utilize tabelas desnecessárias;
- Evite repetir estruturas sem necessidade;
- Mantenha o CSS organizado;
- Simplifique o layout.
Cuidado ao copiar texto do Word
Copiar textos diretamente de determinados editores pode inserir vários estilos e códigos ocultos.
Isso aumenta o tamanho do HTML e pode gerar comportamentos inesperados.
Quando possível, limpe a formatação antes de inserir o conteúdo no template.
Rodapé e elementos importantes
O rodapé não deve ser esquecido.
Dependendo do tipo de campanha e da legislação aplicável, existem informações importantes que precisam estar disponíveis para o destinatário.
Um e-mail profissional normalmente pode conter:
- Identificação do remetente;
- Informações da empresa;
- Link para descadastro;
- Política de privacidade;
- Redes sociais;
- Link para visualizar a mensagem no navegador;
- Informações sobre por que aquela pessoa recebeu a comunicação.
Um link de descadastro claro também ajuda o usuário que não deseja mais receber as mensagens.
Dificultar o cancelamento pode gerar reclamações e prejudicar a reputação da comunicação.
Otimização do pre-header
O pre-header é aquele pequeno trecho exibido próximo ao assunto do e-mail em muitas caixas de entrada.
Ele complementa o assunto e pode ajudar o destinatário a entender melhor o conteúdo antes mesmo de abrir a mensagem.
Exemplo:
Assunto: Seu guia gratuito está disponível
Pre-header: Veja as dicas que preparamos para começar hoje.
Evite deixar essa área preenchida automaticamente com frases pouco interessantes, como:
“Visualizar no navegador”
ou trechos aleatórios do conteúdo.
Use o pre-header como uma extensão estratégica do assunto.
Interatividade e limitações
Inserir recursos interativos diretamente em um e-mail exige cuidado.
Vídeos incorporados, por exemplo, podem não funcionar da mesma maneira em todos os clientes.
Uma alternativa mais segura é utilizar uma imagem com um ícone de reprodução e direcionar o clique para uma página ou plataforma de vídeo.
GIFs podem funcionar bem
GIFs animados podem trazer movimento para a campanha sem depender de JavaScript.
Eles podem ser utilizados para:
- Mostrar uma funcionalidade;
- Demonstrar um produto;
- Destacar uma promoção;
- Apresentar rapidamente diferentes opções.
Mas tome cuidado com o tamanho do arquivo.
Um GIF muito pesado pode deixar a mensagem lenta.
AMP para e-mail
Existem tecnologias mais avançadas que permitem experiências interativas dentro da própria caixa de entrada.
Porém, esse tipo de implementação exige mais conhecimento técnico e possui requisitos específicos.
Para a maioria das campanhas, uma estrutura tradicional, simples e bem construída continua sendo suficiente.
Estrutura básica de um e-mail marketing em HTML
Uma campanha pode seguir esta organização:
- Pre-header;
- Logo ou identificação da marca;
- Título principal;
- Texto introdutório;
- Imagem;
- Explicação da oferta ou conteúdo;
- Botão de chamada para ação;
- Informações complementares;
- Segunda chamada, quando necessária;
- Rodapé;
- Link de descadastro.
Essa estrutura não é obrigatória, mas funciona como um bom ponto de partida.
Checklist antes de enviar
Antes de disparar sua campanha, confira:
- O assunto está correto?
- O pre-header foi configurado?
- O nome do remetente está certo?
- Todos os links funcionam?
- As imagens possuem texto alternativo?
- O layout funciona no celular?
- O botão principal está visível?
- O e-mail foi testado no Gmail?
- Foi testado no Outlook?
- O rodapé está completo?
- Existe opção de descadastro?
- Não existem erros de português?
- As imagens estão otimizadas?
- O conteúdo possui uma chamada para ação clara?
Dominando a técnica
O segredo de um bom e-mail marketing em HTML está em equilibrar três elementos:
Compatibilidade, design e conteúdo.
Não adianta ter um layout extremamente bonito se ele quebra em determinados aplicativos.
Também não adianta ter um código perfeito se o conteúdo não desperta interesse.
Comece dominando os fundamentos: tabelas, CSS inline, imagens otimizadas, responsividade, botões e testes.
Com o tempo, você poderá criar estruturas cada vez mais personalizadas sem perder a compatibilidade.
Na Central Dicas, acreditamos que entender pelo menos o básico do código ajuda você a ter muito mais autonomia para criar, testar e corrigir suas campanhas.
O e-mail marketing continua sendo uma ferramenta poderosa quando existe uma estratégia clara por trás da mensagem.
Teste diferentes formatos, acompanhe suas métricas e melhore cada campanha com base nos resultados obtidos.
Nota Editorial:Links e texto revisado e validado em Agosto de 2026.
Central Dicas
Conteúdos, informações e dicas práticas sobre tecnologia, marketing, negócios e ferramentas digitais.
oi