Analizador de Emails HTML

Analizador de HTMLs

Subir archivo

Sube el HTML guardado en tu equipo

Recargar

Poner URL

Analiza un HTML alojado en internet

Recargar

1. Estructura Básica Obligatoria

✅ Qué hacer:

Usar <table> para la estructura principal
Ancho máximo de 600px
Todo el CSS debe ser inline (style="...")

❌ Qué evitar:

No usar <div> para diseño
Evitar Flexbox/Grid (no compatible)
No usar padding/margin complejos

Ejemplo Correcto:

<table width="600" align="center">
    <tr>
        <td style="padding: 20px;">
            Contenido aquí
        </td>
    </tr>
</table>

2. Elementos Prohibidos

Elemento	Problema	Solución
`<script>`	Bloqueado por todos los clientes	Eliminar todo JavaScript
`<video>`, `<audio>`	No compatible	Usar GIFs animados (con moderación)
Formularios	No funcionan en emails	Enlazar a página web externa
Background images	No funcionan en Outlook	Usar imágenes normales con <img>
Fuentes web	Solo funciona en Apple Mail	Usar fuentes seguras (Arial, Verdana)

3. Buenas Prácticas con Imágenes

✅ Correcto

Especificar width y height
Usar alt text descriptivo
Peso máximo: 250KB por imagen
Formatos: JPG, PNG, GIF

❌ Incorrecto

Imágenes sin dimensiones definidas
Usar SVG (no compatible)
Imágenes muy pesadas (>500KB)
Background-image (problemas en Outlook)

4. Compatibilidad por Cliente

Problemas comunes:

Renderiza emails con el motor de Word (limitado)
No soporta CSS avanzado (flexbox, grid, etc.)
Problemas con padding y margins
No soporta background-image

Solución: Usar tablas anidadas y VML para elementos especiales

Problemas comunes:

Recorta CSS que excede 102KB
No soporta fuentes personalizadas
Problemas con márgenes en móvil
Soporte limitado para background-image

Solución: CSS inline y media queries básicas

5. Plantilla Base Recomendada

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title></title>
    </head>
    <body style="margin:0; padding:0;">
        <!-- Preheader oculto -->
        <div style="display:none; max-height:0px; overflow:hidden;">
            Texto previo que ven algunos clientes
        </div>
        <!-- Contenedor principal -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td align="center">
                    <table width="600" border="0" cellspacing="0" cellpadding="0">
                        <!-- Cabecera -->
                        <tr>
                            <td style="padding:20px; text-align:center;">
                                <img src="logo.jpg" width="200" height="50" alt="Logo" style="display:block;">
                            </td>
                        </tr>
                        <!-- Cuerpo -->
                        <tr>
                            <td style="padding:20px; font-family:Arial, sans-serif; font-size:16px;">
                                Contenido aquí
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>