HTML para correos electrónicos

Un boletín de noticias, la confirmación de una compra o el correo de “restablece tu contraseña” también se escriben en HTML. Pero no en el HTML que has aprendido hasta ahora: los programas de correo se quedaron muy atrás respecto a los navegadores y obligan a usar técnicas de hace veinte años. En esta lección verás por qué, cómo maquetar un correo con tablas y estilos en línea, cómo hacer botones e imágenes que no se rompan, cómo lidiar con el modo oscuro y cómo probar el resultado. Terminarás con una firma de correo profesional.

Por qué el correo es distinto

Una página web la abre un navegador moderno. Un correo lo abre un cliente de correo: Gmail (web y app), Outlook (varias versiones), Apple Mail, Thunderbird, Yahoo… y cada uno entiende el HTML a su manera:

• Outlook para Windows (la versión clásica) dibuja los correos con el motor de Microsoft Word. No entiende Flexbox, Grid, max-width en muchos elementos ni imágenes de fondo en CSS.
• Gmail elimina parte del CSS que no le gusta, y en algunos casos (correos reenviados, cuentas de otros proveedores) quita el bloque <style> entero.
• Ningún cliente ejecuta JavaScript. Nada de <script>, menús desplegables ni validación con código.
• Los formularios, los vídeos y las fuentes web funcionan en muy pocos sitios.

La consecuencia: si quieres que un correo se vea igual en todas partes, tienes que usar lo que entiende todo el mundo, que es HTML muy básico con tablas y estilos escritos en cada etiqueta.

Nota: en esta lección verás atributos que en una web serían obsoletos, como cellpadding, border o width en tablas. En correo se siguen usando porque Outlook los necesita. Fuera del correo, no los uses.

La estructura básica

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <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>Boletín de octubre · Senderos del Norte</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f1f5f9;">
  <!-- aquí va el correo -->
</body>
</html>

Es igual que una página normal, con dos <meta> nuevos para el modo oscuro (los verás más abajo). El <title> no se muestra como asunto (el asunto lo pone el programa de envío), pero algunos clientes lo enseñan al abrir el correo en el navegador.

Maquetar con tablas

En la web, las tablas son para datos (lo viste en tablas). En el correo son la herramienta de maquetación, porque es lo único que todos los clientes colocan igual. El esquema habitual tiene dos tablas:

1. Una tabla exterior que ocupa el 100% del ancho y pinta el fondo.
2. Una tabla interior de 600 píxeles, centrada, con el contenido.

<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color: #f1f5f9;">
  <tr>
    <td align="center" style="padding: 24px 12px;">
      <table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0"
             style="width: 100%; max-width: 600px; background-color: #ffffff;">
        <tr>
          <td style="padding: 24px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; color: #1f2937;">
            Hola, Andrés: ya tienes plaza en la ruta del sábado.
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Cada detalle tiene su motivo:

Atributo	Para qué
role="presentation"	Dice a los lectores de pantalla que no es una tabla de datos. Sin él, anuncian “tabla, 1 fila, 1 columna” y leen el correo celda a celda
border="0" cellpadding="0" cellspacing="0"	Quita bordes y espacios que algunos clientes añaden por defecto
width="600"	El ancho para Outlook, que ignora max-width
style="width: 100%; max-width: 600px"	En el resto: ocupa todo el ancho en el móvil, hasta un máximo de 600 px
align="center" en la celda	Centra la tabla interior en todos los clientes

¿Por qué 600 px? Es el ancho que cabe en el panel de lectura de la mayoría de clientes de escritorio sin que aparezca una barra horizontal. Algunos diseños llegan a 640 px, pero 600 es la referencia segura.

Para varias columnas, usa varias celdas en la misma fila. En el móvil se verán estrechas; si quieres que se apilen, necesitas una media query en un bloque <style> (que no todos los clientes respetan). Por eso muchos correos usan una sola columna: es lo más fiable.

Estilos en línea

Escribe los estilos en el atributo style de cada etiqueta. Es repetitivo, pero es lo único que sobrevive en todos los clientes. Un bloque <style> en el <head> es útil como mejora (media queries, modo oscuro), nunca como base.

Lo que funciona casi en todas partes:

Funciona	Evita
font-family, font-size, font-weight, line-height, color	Fuentes web con @font-face (sí en Apple Mail, no en Gmail ni Outlook)
background-color	background-image en CSS (Outlook la ignora)
padding en celdas <td>	margin (cada cliente lo trata distinto)
border, text-align, vertical-align	Flexbox, Grid, position, float
Colores en hexadecimal de 6 cifras (#0f766e)	Variables CSS, rgb() con transparencia
Medidas en px	rem, vh, clamp()

Pon siempre una pila de fuentes segura (Arial, Helvetica, sans-serif o Georgia, 'Times New Roman', serif) y un line-height en píxeles, porque los valores sin unidad dan resultados distintos en cada cliente.

Consejo: nadie escribe a mano cientos de style. Se trabaja con CSS normal y una herramienta lo incrusta en línea antes de enviar: Juice, Premailer o los propios editores de Mailchimp y Brevo. Otra opción es MJML, un lenguaje con etiquetas como <mj-button> que se convierte en HTML para correo con todas estas técnicas aplicadas.

Imágenes

<img src="https://senderosdelnorte.example/correo/cabecera.jpg"
     alt="Grupo de senderistas en la cima del Castro Valnera"
     width="600" height="250"
     style="display: block; width: 100%; max-width: 600px; height: auto; border: 0;">

• URL absoluta con https://. El correo no está en tu servidor; una ruta como img/cabecera.jpg no lleva a ninguna parte.
• width y height como atributos, porque Outlook ignora los del CSS.
• display: block elimina un hueco de unos píxeles que aparece debajo de las imágenes en algunos clientes.
• Texto alt siempre. Muchos clientes bloquean las imágenes hasta que el usuario las permite, y lo que se ve es el alt. Las imágenes decorativas, con alt="".
• Formatos JPG, PNG o GIF. El SVG y el WebP no se ven en todos los clientes. Los GIF animados funcionan casi en todas partes (Outlook clásico solo muestra el primer fotograma).
• Para pantallas de alta densidad, exporta la imagen al doble de tamaño (1200 px) y muéstrala a 600.

Cuidado: nunca hagas un correo que sea una sola imagen con todo el texto dentro. Con las imágenes bloqueadas, el usuario ve un recuadro vacío; un lector de pantalla no puede leerlo, y los filtros de spam desconfían de esos correos.

Botones “a prueba de balas”

Un botón hecho con una imagen desaparece si las imágenes están bloqueadas. Un botón a prueba de balas (bulletproof button) es un enlace normal con estilos, metido en una tabla para que Outlook respete el fondo y el relleno:

<table role="presentation" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" bgcolor="#0f766e" style="border-radius: 6px;">
      <a href="https://senderosdelnorte.example/rutas/valnera"
         style="display: inline-block; padding: 12px 24px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; text-decoration: none; border-radius: 6px;">
        Ver la ruta completa
      </a>
    </td>
  </tr>
</table>

El color de fondo va dos veces: bgcolor en la celda (para Outlook) y el relleno en el enlace, para que todo el botón sea pulsable y no solo el texto. Las esquinas redondeadas no se verán en Outlook para Windows, pero el botón seguirá funcionando. Esto es lo habitual en correo: se acepta que el diseño se degrade con dignidad en los clientes antiguos.

El preheader

Después del asunto, la bandeja de entrada muestra una línea con el principio del correo. Si no haces nada, aparecerá lo primero que encuentre: “Ver en el navegador” o el texto alt del logo. El preheader es un texto escrito a propósito para ese hueco y oculto dentro del correo:

<body style="margin: 0; padding: 0;">
  <div style="display: none; max-height: 0; overflow: hidden; mso-hide: all;">
    Tres rutas nuevas, la salida del sábado y el calendario de invierno.
  </div>
  <!-- resto del correo -->
</body>

Debe ir lo primero dentro de <body>. mso-hide: all es una propiedad que solo entiende Outlook. Escribe entre 40 y 100 caracteres que completen el asunto, no que lo repitan.

Modo oscuro

Cada cliente aplica el modo oscuro a su manera:

• Unos no cambian nada del correo.
• Otros (la app de Gmail en Android, por ejemplo) invierten los colores claros a la fuerza: tu fondo blanco pasa a gris oscuro y el texto negro a claro.
• Otros (Apple Mail) respetan los estilos que tú definas para el modo oscuro.

Con las dos <meta> de la estructura básica indicas que tu correo admite ambos modos. En Apple Mail y algunos más puedes ajustar los colores con un bloque <style>:

<style>
  @media (prefers-color-scheme: dark) {
    .fondo { background-color: #0f172a !important; }
    .texto { color: #e2e8f0 !important; }
  }
</style>

Y en las celdas: <td class="fondo texto" style="background-color: #ffffff; color: #1f2937;">. El !important es necesario porque los estilos en línea ganan a los del bloque <style> (recuerda la cascada).

Consejos prácticos:

• Logos en PNG con fondo transparente y un borde fino del color contrario, para que no desaparezcan sobre fondo oscuro.
• Evita el blanco puro y el negro puro: #ffffff sobre #000000 invertido queda muy brusco.
• Prueba siempre en los dos modos.

La versión de texto plano

Un correo profesional se envía en formato multiparte: una versión HTML y otra de texto plano dentro del mismo mensaje. El cliente muestra la que prefiera (algunos relojes y lectores solo leen texto). Además, los filtros de spam ven con malos ojos los correos que solo traen HTML.

Senderos del Norte · Boletín de octubre

Hola, Andrés:

Este sábado subimos al Castro Valnera. Salida a las 8:00 desde la estación de autobuses.

Ver la ruta completa: https://senderosdelnorte.example/rutas/valnera

Darte de baja: https://senderosdelnorte.example/baja

Los servicios de envío (Mailchimp, Brevo, Amazon SES…) generan esta versión automáticamente o te dejan escribirla. Revísala: a veces quedan enlaces sueltos y textos alt sin sentido.

Nota: en España, los correos comerciales deben incluir un enlace para darse de baja y los datos de quien envía. No es una cuestión técnica, pero un correo sin baja es un problema legal y un candidato seguro a la carpeta de spam.

Accesibilidad en el correo

Las reglas de accesibilidad siguen valiendo:

• lang="es" en <html>, para que el lector de pantalla use la voz en español.
• role="presentation" en todas las tablas de maquetación.
• Títulos reales (<h1>, <h2>) con estilos en línea, no párrafos con letra grande.
• Texto de al menos 14 px (mejor 16 px) y buen contraste.
• Enlaces con texto descriptivo: “Ver la ruta completa”, no “pincha aquí”.

Cómo probar un correo

No basta con abrir el archivo en el navegador: el navegador lo entiende todo y te dará una falsa sensación de seguridad.

1. Envíatelo a cuentas de Gmail, Outlook y, si puedes, Apple Mail. Ábrelo en el ordenador y en el móvil.
2. Bloquea las imágenes y comprueba que el correo se sigue entendiendo.
3. Activa el modo oscuro en el sistema y en la app de correo.
4. Para ver decenas de clientes a la vez existen servicios como Litmus o Email on Acid (de pago, con prueba gratuita). Para probar envíos sin molestar a nadie, Mailtrap captura los correos en una bandeja falsa.
5. Antes de usar una propiedad CSS, consulta caniemail.com: es como Can I use, pero para clientes de correo.

Ejemplo: firma de correo

Una firma es un correo en miniatura: una tabla con dos celdas, foto a la izquierda y datos a la derecha. Es el ejemplo del editor de esta lección:

<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; color: #1f2937;">
  <tr>
    <td style="padding: 0 16px 0 0; vertical-align: top;">
      <img src="https://senderosdelnorte.example/firma/lucia.png" alt="Lucía Marín" width="80" height="80"
           style="display: block; border: 0; border-radius: 40px;">
    </td>
    <td style="padding: 0 0 0 16px; border-left: 3px solid #0f766e; vertical-align: top; font-size: 14px; line-height: 20px;">
      <strong style="font-size: 16px; color: #0f766e;">Lucía Marín</strong><br>
      Coordinadora de rutas · Senderos del Norte<br>
      <a href="tel:+34942000000" style="color: #1f2937; text-decoration: none;">942 000 000</a><br>
      <a href="https://senderosdelnorte.example" style="color: #0f766e;">senderosdelnorte.example</a>
    </td>
  </tr>
</table>

Para usarla en Gmail u Outlook web: abre el archivo en el navegador, selecciona toda la firma, cópiala y pégala en el cuadro de firma de la configuración. El programa conserva los estilos en línea. La foto tiene que estar publicada en internet (una URL absoluta), no en tu ordenador.

Mantén la firma corta: nombre, cargo, un teléfono y una web. Nada de citas largas ni de avisos legales de diez líneas.

Errores frecuentes

• Diseñar el correo con Flexbox o Grid: en Outlook todo aparece apilado o descolocado. Usa tablas.
• Confiar en el bloque <style>: algunos clientes lo eliminan. La base, siempre en línea.
• Rutas relativas en las imágenes: el correo no está en tu servidor. Usa https:// completo.
• Olvidar role="presentation": los lectores de pantalla leen el correo como una hoja de cálculo.
• Un correo que es solo una imagen: invisible con las imágenes bloqueadas y sospechoso para los filtros de spam.
• Botones hechos con imágenes: desaparecen si se bloquean. Usa botones a prueba de balas.
• Probar solo en el navegador: prueba en clientes reales, con imágenes bloqueadas y en modo oscuro.
• No poner enlace de baja en correos comerciales.

Resumen

Tema	Regla
Maquetación	Tablas con role="presentation", una exterior al 100% y otra interior de 600 px
Estilos	En línea con style; el <style> solo como mejora
CSS seguro	Fuentes del sistema, px, colores hex, padding en celdas
Imágenes	URL absoluta, width/height, display: block, alt siempre
Botones	Enlace con relleno dentro de una celda con bgcolor
Preheader	Texto oculto al principio de <body>
Modo oscuro	meta color-scheme + media query con !important y pruebas
Texto plano	Versión multiparte con los mismos enlaces
Pruebas	Clientes reales, imágenes bloqueadas, caniemail.com

En la siguiente lección repasarás las buenas prácticas para escribir HTML limpio y fácil de mantener.