Construtor de e-mail HTML
HTML Email Builder
Monta um e-mail por blocos como HTML baseado em tabelas e estilos em linha, com botão apoiado em VML, e escreve a alternativa em texto puro a partir dos mesmos blocos.
Um editor de blocos que só consegue produzir o layout em que os clientes de e-mail concordam: tabelas aninhadas, estilos inline e um botão desenhado duas vezes, para que o motor Word do Outlook receba uma forma de verdade em vez de um link de texto com um fundo inútil. Ele exporta o HTML e a alternativa em texto simples juntos, e o texto é escrito a partir dos blocos, não removendo tags.
Mensagem
Blocos
- Título
- Parágrafo
- Botão
- Divisória
- Duas colunas
- Rodapé
Prévia
Isto não é uma captura de tela do cliente. É o seu HTML com as regras de remoção documentadas daquele cliente aplicadas, desenhado aqui por este navegador.
- O Outlook para Windows renderiza pelo Microsoft Word. Este painel é um navegador: ele consegue mostrar o que ainda restaria ao Word depois da remoção, mas não como o Word diagramaria isso. Quebras de linha, espaçamento e escala das imagens (o Word presume 96 dpi diante de uma tela de 120 dpi) vão ser diferentes.
Removido para este cliente · 2
Declarações: border-radius: 6px · border-radius: 8px
O botão é desenhado duas vezes: uma forma VML para o motor Word do Outlook e um link para todo o resto. Só um dos dois chega a aparecer.
O que o conferidor diz desta saída
Nada que quebre nem que perca efeito. É para isso que se monta assim.
4,96 kB · 5% dos 102 KB do Gmail
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="pt-BR" xml:lang="pt-BR" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Esta semana na Example</title>
<!--[if mso]>
<xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
</head>
<body style="margin:0;padding:0;background:#f2f4f7;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%">
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;color:#f2f4f7">O que mudou esta semana e onde ler o resto‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#f2f4f7" style="background:#f2f4f7">
<tr>
<td align="center" style="padding:24px 12px">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" style="width:100%;max-width:600px;background:#ffffff;border-radius:8px">
<tr><td align="left" style="padding:24px 24px 8px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:26px;line-height:1.35;font-weight:700;color:#1f2328">A novidade da semana</td></tr>
<tr><td align="left" style="padding:8px 24px 16px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.75;color:#1f2328">Olá.<br>Aqui está o que mudou esta semana. O layout é feito de tabelas, então chega inteiro no Outlook.</td></tr>
<tr><td align="center" style="padding:16px 24px"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/news" style="height:46px;v-text-anchor:middle;width:240px;" arcsize="13%" stroke="f" fillcolor="#1a56db"><w:anchorlock/><center style="color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:16px;font-weight:700;">Ler a matéria inteira</center></v:roundrect><![endif]--><!--[if !mso]><!-- --><a href="https://example.com/news" target="_blank" style="display:inline-block;min-width:192px;background:#1a56db;color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:16px;font-weight:700;line-height:46px;text-align:center;text-decoration:none;border-radius:6px;padding:0 24px;mso-hide:all">Ler a matéria inteira</a><!--<![endif]--></td></tr>
<tr><td style="padding:8px 24px"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td height="1" style="height:1px;line-height:1px;font-size:0;background:#e3e6ea"> </td></tr></table></td></tr>
<tr><td style="padding:8px 24px"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td width="276" valign="top" style="font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;padding-right:12px">Esta é a coluna da esquerda. As duas são uma linha só de uma tabela.</td><td width="276" valign="top" style="font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;padding-left:12px">E esta é a da direita. Não tem flexbox no meio, então o motor do Word mantém as duas lado a lado.</td></tr></table></td></tr>
<tr><td align="left" style="padding:16px 24px 28px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;font-size:12px;line-height:1.7;color:#6b7280;">Endereço do remetente · Seul<br><a href="https://example.com/unsubscribe" target="_blank" style="color:#6b7280;text-decoration:underline">Cancelar inscrição</a></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>Texto puro
O que mudou esta semana e onde ler o resto A novidade da semana ==================== Olá. Aqui está o que mudou esta semana. O layout é feito de tabelas, então chega inteiro no Outlook. Ler a matéria inteira: https://example.com/news —————————————————————————————— Esta é a coluna da esquerda. As duas são uma linha só de uma tabela. E esta é a da direita. Não tem flexbox no meio, então o motor do Word mantém as duas lado a lado. —————————————————————————————— Endereço do remetente · Seul Cancelar inscrição: https://example.com/unsubscribe
Gerado a partir dos blocos, não removendo tags — é por isso que os links se leem como frases e não como uma parede de URLs.
Como usar
Configure a mensagem
Assunto, preheader, largura e cores. O preheader é a linha cinza que a lista da caixa de entrada mostra depois do assunto — deixe-o vazio e o cliente pega o primeiro texto que aparecer, que normalmente é “Ver no navegador”.
Empilhe os blocos
Título, parágrafo, imagem, botão, duas colunas, divisor, espaçador, rodapé. O bloco de duas colunas é uma linha de tabela, não uma media query, então continua com duas colunas nos clientes que ignoram media queries.
Observe a prévia e o veredito
Os mesmos painéis por cliente do verificador, e abaixo deles a leitura que o próprio verificador faz desta saída. Ela deve continuar vazia — é esse o sentido de construir assim.
Exporte as duas partes
Envie-as como multipart/alternative. Uma mensagem só em HTML pontua pior em todo filtro de spam e é ilegível para qualquer coisa que leia e-mail em voz alta.
Perguntas frequentes
Por que o botão aparece duas vezes no HTML?
Uma cópia é uma forma VML dentro de um comentário <!--[if mso]-->, que só o motor Word do Outlook lê; a outra é uma âncora comum dentro de um comentário que o Word ignora. Exatamente uma delas fica visível em cada caso. Sem a metade VML, o padding é descartado no Outlook e só o texto em si é clicável.
O coreano é renderizado corretamente no Windows?
A pilha de fontes põe Apple SD Gothic Neo, Malgun Gothic e Noto Sans KR antes de qualquer fonte latina, porque o Outlook recua para Times New Roman, e não para a fonte seguinte, quando uma web font falha — uma pilha com o latino primeiro é como o hangul acaba virando quadradinhos.
Posso colar meu próprio HTML aqui?
Não — esta página só constrói. HTML existente vai para o verificador de compatibilidade, que dirá o que mudar e gerará a marcação substituta para os elementos que precisarem.
Pode receber de
Verificador de compatibilidade de e-mail HTML
HTML Email Compatibility Check
Confere o HTML de um e-mail contra o que cada cliente de e-mail realmente suporta, aponta o elemento que quebra e mostra lado a lado o que sobrevive no Gmail, Outlook e nos demais.
Tabela de suporte dos clientes de e-mail
Email Client Support Table
O que Gmail, Outlook, Apple Mail, Yahoo, Samsung Mail e Thunderbird suportam em e-mail HTML, a partir dos testes em dispositivo do caniemail, com a data em que cada um foi testado pela última vez.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Tabela de suporte dos clientes de e-mail
Email Client Support Table
O que Gmail, Outlook, Apple Mail, Yahoo, Samsung Mail e Thunderbird suportam em e-mail HTML, a partir dos testes em dispositivo do caniemail, com a data em que cada um foi testado pela última vez.
Comparação entre enviado e entregue
Sent vs Delivered Comparison
Envie um rascunho a um endereço descartável a partir da sua própria conta e veja o que o caminho de envio reescreveu — links envoltos em redirecionamentos, blocos de estilo removidos, beacons adicionados, a codificação usada.
Verificador de compatibilidade de e-mail HTML
HTML Email Compatibility Check
Confere o HTML de um e-mail contra o que cada cliente de e-mail realmente suporta, aponta o elemento que quebra e mostra lado a lado o que sobrevive no Gmail, Outlook e nos demais.
Verificador de link suspeito
Suspicious URL Check
Inspeciona a forma de um link antes de você abri-lo — caracteres parecidos, hosts em IP literal, truques com @, subdomínios profundos, portas estranhas, encurtadores — e, se pedir, segue os redirecionamentos e consulta a data de registro do domínio. Sem base de reputação: sinais, não veredito.
Inspetor de arquivos compactados
Archive Inspector
Abre um zip sem extrair e aponta entradas com travessia de caminho, executáveis, macros e zip bombs — inspeção estrutural, não antivírus.
Conversor de áudio
Audio Converter
Converte entre MP3, WAV, FLAC, AAC, OGG e Opus com ajuste de bitrate e taxa de amostragem.