Código de email HTML: ejemplos y guía para crear emails que funcionen en cualquier buzón
Puntos clave
- Los emails HTML se crean con tablas, no con divs. La mayoría de los clientes de correo, sobre todo Outlook, no admiten el CSS moderno para maquetar. La estructura basada en tablas sigue siendo el estándar más fiable.
- El CSS en línea es imprescindible. Muchos clientes de correo eliminan los estilos incluidos en el <head> del correo. Aplica el CSS directamente a cada elemento para mantener intacto tu diseño.
- El diseño responsive es obligatorio. Más de la mitad de los emails se abren en dispositivos móviles. Usa diseños fluidos, media queries y fuentes escalables para adaptarte a cualquier tamaño de pantalla.
- Haz pruebas antes de enviar. Cada cliente de correo renderiza el HTML de forma distinta. Lo que se ve perfecto en tu navegador puede descuadrarse en Outlook 2019 o Apple Mail. Previsualiza y prueba siempre.
- No tienes que empezar desde cero. El editor HTML de Benchmark Email te permite pegar cualquier email HTML directamente en la plataforma y enviarlo.
El email HTML parece sencillo, pero resulta ser todo lo contrario. Conoces HTML. Has creado páginas web. Pero en cuanto intentas aplicar esos conocimientos a un email, algo falla en Outlook, tu imagen desaparece en Gmail o el diseño se descompone en el móvil.
Esto se debe a que el email HTML sigue sus propias reglas, y esas reglas no han cambiado. Lo que sí ha cambiado son las herramientas que las rodean. Hoy puedes programar a mano un email atractivo y responsive, usar un editor moderno que se encargue de la complejidad por ti o combinar ambas opciones importando tu propio HTML directamente en una plataforma como Benchmark Email y enviándolo desde allí.
Esta guía explica lo que necesitas saber sobre el código de email HTML en 2026: cómo se estructura, cómo hacerlo responsive, qué evitar y cómo usar las herramientas adecuadas para no tener que pelearte con tu cliente de correo en cada envío.
Por qué el email HTML es diferente del HTML convencional
A simple vista, crear una página web y crear un email HTML parecen tareas similares. Ambas utilizan HTML y CSS. Sin embargo, los navegadores web cumplen los estándares desde hace años. Los clientes de correo, no.
Outlook sigue utilizando el motor de renderizado de Microsoft Word para mostrar el HTML, por lo que ignora gran parte del CSS moderno. Gmail recorta los emails que superan un determinado tamaño. Apple Mail gestiona los elementos de forma distinta a la app de Gmail en el mismo teléfono. El resultado: un email que se ve perfecto en un cliente puede verse completamente roto en otro.
No se trata de un error en tu código. Así es como funcionan los clientes de correo, y por eso el email HTML tiene su propio conjunto de convenciones, que se han mantenido constantes incluso mientras el desarrollo web ha seguido avanzando.
En resumen, estas son esas convenciones:
- Usa tablas para la maquetación, no <div> ni CSS grid o flexbox.
- Aplica estilos en línea a cada elemento en lugar de depender de una hoja de estilos.
- Limítate a fuentes seguras para la web o define pilas de fuentes alternativas a prueba de fallos.
- Usa URL absolutas para todas las imágenes alojadas externamente.
- Mantén el tamaño total del archivo por debajo de 100 KB para evitar que Gmail recorte el mensaje.
La estructura básica de un email HTML
Todo email HTML, tanto si lo programas a mano como si lo exportas desde un editor, sigue un esqueleto similar. A continuación verás cómo es y por qué importa cada elemento.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your Email Subject</title>
<style type="text/css">
/* Responsive styles go here */
@media only screen and (max-width: 600px) {
.wrapper { width: 100% !important; }
.content { padding: 20px !important; }
}
</style>
</head>
<body style="margin: 0; padding: 0; background-color: #f4f4f4;">
<!-- Outer wrapper table -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="padding: 20px 0;">
<!-- Inner content table -->
<table class="wrapper" border="0" cellpadding="0" cellspacing="0"
width="600" style="background-color: #ffffff; border-radius: 4px;">
<tr>
<td class="content" style="padding: 40px;">
<!-- Your content goes here -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Qué hace cada parte:
- El doctype XHTML indica a los clientes de correo más antiguos cómo interpretar tu código.
- La metaetiqueta viewport indica a los navegadores móviles cómo escalar el email.
- El bloque <style> dentro del <head> es donde se colocan las media queries (nota: no todos los clientes de correo lo leen, por eso los estilos en línea se encargan de todo lo demás).
- La tabla exterior define el fondo y la tabla interior de 600 px es el ancho de contenido estándar que funciona en los clientes de escritorio.
Un ejemplo práctico de código para email HTML
Este es un ejemplo real de una sección de email de una sola columna: un encabezado, un párrafo breve y un botón de llamada a la acción. Repite y apila este patrón para crear un email completo.
<!-- Header image -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="padding: 0 0 24px 0;">
<img src="https://yourdomain.com/header-image.png"
alt="Your Brand Name"
width="600"
style="display: block; max-width: 100%; height: auto;" />
</td>
</tr>
</table>
<!-- Headline -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 0 0 16px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: bold;
color: #111111;
line-height: 1.3;">
Your headline goes here
</td>
</tr>
</table>
<!-- Body text -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 0 0 24px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #444444;
line-height: 1.6;">
This is your body copy. Keep it short, clear, and focused on one
message. Every element of this email should point your reader toward
the action you want them to take.
</td>
</tr>
</table>
<!-- CTA Button -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"
style="border-radius: 4px; background-color: #0066CC;">
<a href="https://yourdomain.com/your-page"
target="_blank"
style="display: inline-block;
padding: 14px 28px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
border-radius: 4px;">
Click Here to Learn More
</a>
</td>
</tr>
</table>Algunos detalles que conviene destacar de este ejemplo:
- El botón se construye con una tabla, no con un <div> ni con un <button>. Es la forma más fiable de conseguir un renderizado coherente del botón en todos los clientes, incluido Outlook.
- Todos los estilos van en línea. Familia tipográfica, tamaño, color, interlineado, padding: todo se declara en el propio elemento. El resultado es más extenso, pero es lo que mantiene intacto el diseño cuando los clientes de correo eliminan el <head>.
- Las imágenes tienen anchos explícitos y display: block. Así se evitan espacios no deseados debajo de las imágenes en algunos clientes de correo y se impide que el diseño se desplace cuando la imagen se carga.
- Los enlaces dentro de los botones llevan su propio estilo. Nunca dependas del color del elemento padre para dar estilo a una etiqueta de anclaje dentro de un email.
Cómo hacer que tu email HTML sea responsive
Como más de la mitad de todos los emails se abren en el móvil, un diseño que solo funciona a 600 px no está terminado. El email HTML responsive suele basarse en dos técnicas: diseños fluidos y media queries.
Diseños fluidos
En lugar de usar anchos fijos en píxeles en los elementos internos, utiliza anchos en porcentaje para que las columnas se reduzcan de forma natural. El contenedor exterior puede mantenerse en 600 px, pero todo lo que haya dentro debe adaptarse.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- Left column -->
<td width="50%" valign="top"
style="padding: 0 12px 0 0;">
<!-- Left content -->
</td>
<!-- Right column -->
<td width="50%" valign="top"
style="padding: 0 0 0 12px;">
<!-- Right content -->
</td>
</tr>
</table>Media queries
En pantallas de menos de 600 px, lo habitual es apilar las columnas y aumentar el tamaño de la fuente. Las media queries en el <head> se encargan de esto en los clientes que las admiten (Gmail en la mayoría de plataformas, Apple Mail e iOS Mail).
@media only screen and (max-width: 600px) {
/* Stack two-column layouts */
.two-col td {
display: block !important;
width: 100% !important;
padding: 0 0 16px 0 !important;
}
/* Larger body text on small screens */
.body-text {
font-size: 18px !important;
line-height: 1.6 !important;
}
/* Full-width CTA button */
.cta-button {
width: 100% !important;
text-align: center !important;
}
}Añade los nombres de clase correspondientes a los elementos de tu tabla (class=”two-col”, class=”body-text”, etc.) y los estilos se aplicarán en móviles, mientras que los estilos en línea se ocupan de la versión de escritorio.
Errores comunes en emails HTML que debes evitar
- Usar imágenes de fondo en Outlook. Outlook ignora las imágenes de fondo CSS en la mayoría de los elementos. Usa etiquetas <img> en su lugar o recurre a la solución alternativa con VML de Microsoft si la imagen de fondo es imprescindible.
- Depender de JavaScript. Ningún cliente de correo ejecuta JavaScript. Cualquier funcionalidad interactiva debe estar en una landing page, no dentro del propio email.
- No definir alt text. Muchos clientes de correo bloquean las imágenes de forma predeterminada. Si dejas el alt text vacío, los lectores verán recuadros en blanco sin ninguna pista sobre lo que están viendo.
- Incrustar fuentes de Google Fonts u otras fuentes personalizadas. Las fuentes web funcionan en Apple Mail y en algunos otros clientes, pero fallan sin avisar en muchos más. Define siempre una pila de fuentes alternativas: font-family: ‘Your Font’, Georgia, serif;.
- Olvidar la versión en texto plano. La mayoría de las plataformas de email marketing envían una alternativa en texto plano junto con tu HTML. Si la tuya no la genera automáticamente, escríbela tú mismo. Es importante para la entregabilidad y la accesibilidad.
- Superar los 100 KB de tamaño. Gmail recorta los emails que superan este límite y oculta tu contenido tras un enlace de «Ver mensaje completo». Mantén tu HTML ligero y aloja las imágenes en un servidor externo en lugar de incrustarlas.
Herramientas para crear emails HTML en 2026
Tienes varias opciones, según cuánto quieras implicarte en el proceso.
Programar a mano
Si te manejas bien con HTML y CSS, programar a mano te da un control total. Utiliza un editor de código moderno (VS Code, Sublime Text o similar) y combínalo con una herramienta de previsualización local. Vale la pena echar un vistazo al framework MJML si quieres un marcado más fácil de mantener y que puedas compilar a HTML compatible con email. Se encarga por ti de gran parte del código repetitivo de las tablas.
Herramientas de diseño específicas para email
Plataformas como Litmus y Email on Acid te permiten previsualizar tu HTML en decenas de clientes de correo antes de enviarlo. Son especialmente útiles para revisar una plantilla codificada a mano.
El editor HTML de Benchmark Email
Si ya has creado un email HTML, ya sea codificado a mano, exportado desde una herramienta de diseño u obtenido de una biblioteca de plantillas, el editor HTML de Benchmark Email te permite pegar ese código directamente en la plataforma y enviarlo a tu lista.
Así funciona:
- Copia el HTML de tu archivo de email o de tu plantilla.
- En Benchmark Email, crea una nueva campaña y selecciona la opción del editor HTML.
- Pega tu HTML en el editor.
- Previsualízalo en distintos dispositivos para confirmar que todo se muestra correctamente.
- Envíalo a tu lista como cualquier otra campaña.
Obtienes toda la infraestructura de envío de Benchmark Email, incluidas las herramientas de entregabilidad y de gestión de listas, el seguimiento de aperturas y clics y los informes, sin tener que reconstruir tu email en un editor de arrastrar y soltar. Si ya has invertido tiempo en una plantilla personalizada, esta es la forma más rápida de sacarle partido.
El editor HTML también incluye una vista de código para que puedas hacer cambios rápidos, como editar el texto, actualizar un enlace o cambiar la URL de una imagen, sin salir de la plataforma.
Cómo usar la IA para escribir el código HTML de tus emails
Las herramientas de programación con IA han hecho que codificar emails HTML a mano sea mucho más accesible. Si sabes lo que quieres pero no te sientes cómodo escribiendo HTML basado en tablas desde cero, herramientas como ChatGPT, Claude y GitHub Copilot pueden generar una estructura de email funcional a partir de una descripción en lenguaje sencillo. Además, son más rápidas que rebuscar en la documentación cada vez que necesitas un diseño de dos columnas o un botón a prueba de fallos.
Algunas formas en las que la IA resulta útil al trabajar con emails HTML:
Generar una plantilla de partida. Describe la estructura de tu email («una imagen de cabecera, una sección de dos columnas y un botón de CTA, en una sola columna en móvil») y la herramienta de IA generará un esqueleto HTML basado en tablas que podrás editar a partir de ahí. Así ahorras tiempo de configuración y llegas antes a la personalización.
Escribir componentes específicos. ¿Necesitas un fondo VML a prueba de fallos para Outlook o un fragmento de texto de preheader que quede oculto visualmente pero aparezca en la vista previa de la bandeja de entrada? Son patrones bien documentados que la IA maneja con fiabilidad, así que no tienes que buscar la sintaxis exacta cada vez.
Depurar código con errores. Pega en un chat de IA la sección de HTML que no funciona y pregunta qué falla. Las herramientas de IA pueden detectar etiquetas sin cerrar, estilos en línea que faltan o atributos que los clientes de correo no admiten, sobre todo cuando tienes delante 300 líneas de marcado de tablas y no logras encontrar el problema.
Convertir HTML normal en HTML apto para email. Si tienes el diseño de una página web que quieres adaptar a un email, la IA puede ayudarte a reescribir la estructura de CSS grid o flexbox con equivalentes basados en tablas, una de las partes más tediosas del proceso de conversión.
Una advertencia importante: el código HTML para email generado por IA es un buen punto de partida, no un producto terminado. Prueba siempre el código generado por IA en clientes de correo reales antes de enviarlo, porque a veces estas herramientas producen patrones que funcionan en los navegadores pero fallan en Outlook, o generan un marcado demasiado complejo que no se comprime bien. Úsalo para agilizar el proceso y después valídalo con tu flujo de pruebas habitual.
Cómo probar tu email HTML antes de enviarlo
Por mucho cuidado que pongas al programar, probarlo en buzones de correo reales es la única forma de saber si tu email funciona de verdad. Algunas opciones:
Usa una herramienta de vista previa. Tanto Litmus como Email on Acid generan capturas de pantalla de tu email en más de 90 clientes de correo. Si envías con regularidad a una audiencia variada, merece la pena invertir en ellas.
Envíate una prueba. Antes de lanzar cualquier campaña, envía una prueba a tu propia bandeja de entrada y revísala al menos en Gmail, Apple Mail y Outlook. Entre los tres cubren a la mayoría de tus suscriptores.
Revísalo en el móvil. Abre el email de prueba en tu teléfono. Comprueba el tamaño de las fuentes, las áreas táctiles de los botones y si los diseños de dos columnas se apilan correctamente.
Comprueba tus enlaces. Haz clic en todos los enlaces del email de prueba. Es fácil dejar una URL provisional o un error tipográfico en un parámetro UTM, y esos fallos saltan a la vista en cuanto envías el email.
Revisa la versión en texto plano. Si tu plataforma la genera automáticamente, comprueba que se lea con claridad e incluya todos los enlaces importantes.
Preguntas frecuentes
¿Qué es un email HTML y en qué se diferencia de un email en texto plano?
Un email HTML utiliza código de marcado para controlar el diseño, las fuentes, los colores, las imágenes y los botones, lo que te permite ofrecer una experiencia diseñada y alineada con tu marca. Un email en texto plano es justo lo que su nombre indica: sin formato, solo palabras. La mayoría de los emails de marketing son HTML, pero toda campaña HTML debería incluir también una alternativa en texto plano para mejorar la entregabilidad y la accesibilidad.
¿Necesito saber programar para enviar un email HTML?
No. Los editores de email de arrastrar y soltar, como Benchmark Email, generan un HTML limpio de forma interna. Si ya tienes una plantilla HTML que quieres usar, el editor HTML de Benchmark Email te permite pegarla y enviarla directamente sin que tengas que programar nada.
¿Por qué tengo que usar tablas en los emails HTML en lugar de CSS moderno?
Los clientes de correo, sobre todo Outlook para Windows, utilizan motores de renderizado antiguos que no admiten CSS grid, flexbox ni muchas propiedades de diseño modernas. Desde hace más de una década, las tablas son la alternativa fiable para maquetar emails y siguen ofreciendo los resultados más uniformes entre los distintos clientes.
¿Cómo hago que mi email HTML sea responsive?
Usa un diseño fluido con anchos en porcentaje para los elementos internos, establece un max-width de 600 px y añade media queries en el <head> para aplicar ajustes específicos para móviles, como apilar columnas o aumentar el tamaño de las fuentes. Asegúrate también de que las imágenes se adapten con max-width: 100%; height: auto; para que no se desborden en pantallas pequeñas.
¿Cuál es el tamaño máximo de archivo de un email HTML?
Mantén tu archivo HTML por debajo de 100 KB. Gmail recorta los emails que superan este límite y oculta parte del contenido tras un enlace «Ver todo el mensaje». Aloja las imágenes en un servidor externo en lugar de incrustarlas en base64 y mantén un código limpio, sin comentarios ni espacios en blanco innecesarios.
¿Puedo usar mi propia plantilla HTML en Benchmark Email?
Sí. El editor HTML de Benchmark Email está pensado precisamente para eso. Copia tu HTML, pégalo en el editor, revisa la vista previa y envíalo. Así disfrutas de todas las funciones de envío e informes de Benchmark Email con tu propio diseño personalizado.
Sobre el autor:
High level marketing, technical email topics, email trends | Jessica Lunk is the VP of Growth Marketing at Benchmark Email, where she combines strategic flair with hands-on expertise to help busy marketers elevate their email game. Delivering timely insights on list hygiene, ROI, and email deliverability, she’s a go-to voice for practical marketing wisdom.