# Linter de HTML para Email Verifica la compatibilidad entre clientes de plantillas HTML de email: flex/grid no soportado, CSS no inline, trampas de renderizado Word de Outlook, problemas de layout con tablas y falta de accesibilidad. Cubre las limitaciones conocidas de Gmail/Outlook/Apple Mail. > Página canónica: https://elysiatools.com/es/tools/email-html-linter - **Categoría:** Development - **Palabras clave:** html email, email html, linter email, compatible outlook, renderizado gmail, css inline, vml, layout tabla, newsletter, plantilla email ## Descripción general Atrapa los bugs de HTML-email que solo aparecen en Outlook, Gmail y Apple Mail — antes de enviar. \*\*Por qué el HTML de email es diferente.\*\* El email sigue siendo en gran parte HTML de los 90 procesado por motores inconsistentes: Outlook usa \*\*Microsoft Word\*\*, Gmail elimina la mayoría de los \`\`, Apple Mail es el más indulgente. Flexbox, grid y position:fixed fallan en la mayoría de clientes. \*\*Qué revisa.\*\* CSS no soportado, CSS no inline, trampas de Outlook (VML), layout con tablas (role/cellpadding), imágenes (alt/width), accesibilidad (lang, contraste, formularios/script). \*\*Niveles.\*\* 🔴 Error, 🟡 Warning, 🔵 Info. Strict muestra info; Lenient solo errores y warnings clave. \*\*Limitaciones.\*\* Es un comprobador de reglas estático — no puede ejecutar el email en clientes reales. ## Entradas - **HTML del correo** (textarea): Hello... - **Severidad** (select) ## Cuándo usarlo - Antes de enviar una campaña de newsletter para asegurar que el diseño no se rompa en Outlook o Gmail. - Al desarrollar plantillas de correo electrónico que utilizan maquetación basada en tablas y estilos CSS. - Para depurar problemas de visualización específicos, como la falta de soporte de flexbox o grid en clientes de correo antiguos. ## Cómo funciona - Introduce el código HTML de tu plantilla de correo en el editor de texto. - Selecciona el nivel de severidad deseado entre estricto, equilibrado o indulgente. - El linter analiza estáticamente el código en busca de CSS no soportado, falta de atributos en tablas y problemas de accesibilidad. - Revisa el reporte generado con los errores, advertencias e información de compatibilidad para corregir tu plantilla. ## Casos de uso - Validación de plantillas de newsletter corporativas antes de su integración en plataformas de envío masivo. - Optimización de accesibilidad en correos electrónicos mediante la detección de atributos de idioma y textos alternativos faltantes. - Corrección de layouts rotos en Outlook mediante la identificación de elementos que requieren estructuras de tabla tradicionales. ## Preguntas frecuentes ### ¿Por qué falla el diseño flexbox o grid en mi email? La mayoría de los clientes de correo, especialmente Outlook en escritorio, utilizan motores de renderizado antiguos que no soportan CSS moderno como flexbox o grid. ### ¿Qué diferencia hay entre los niveles de severidad? El nivel estricto muestra todas las advertencias e información de accesibilidad, el equilibrado filtra avisos menores y el indulgente solo reporta errores críticos. ### ¿Este linter renderiza el correo en dispositivos reales? No, realiza un análisis estático de reglas de compatibilidad de código HTML y CSS sin ejecutar ni previsualizar el correo en clientes reales. ### ¿Por qué es necesario usar estilos inline en los correos? Clientes como Gmail para móviles suelen eliminar las etiquetas de estilo en el encabezado, por lo que los estilos inline garantizan que el diseño se mantenga. ### ¿Qué es una trampa de Outlook en HTML de email? Son fallos de renderizado causados por el motor de Word en Outlook, como la falta de comentarios condicionales MSO o imágenes sin un ancho explícito. ## Herramientas relacionadas - [Constructor de art direction responsive Picture / srcset](https://elysiatools.com/es/tools/responsive-picture-srcset-art-direction-builder): Genera marcado completo con recortes art-directed: elementos por breakpoint, candidatas 1x/2x o descriptores de ancho con plantilla {w}, capas AVIF/WebP opcionales, manejo de sizes, width/height anti-CLS, y sabores HTML y JSX con notas de lint basadas en la especificación. - [Verificador de accesibilidad](https://elysiatools.com/es/tools/accessibility-checker): Detecta problemas comunes de WCAG 2.1 en HTML, paginas o imagenes de diseno y devuelve sugerencias accionables - [Generador de Data URI](https://elysiatools.com/es/tools/data-uri-generator): Convierte archivos en Data URIs (Base64 o porcentaje-codificado) para incrustar imágenes, fuentes y recursos directamente en HTML, CSS o Markdown - [Generador de informes de auditoria de accesibilidad](https://elysiatools.com/es/tools/accessibility-audit-report-generator): Audita HTML o una URL para detectar problemas comunes de WCAG y exporta un PDF estructurado - [Linter de Dockerfile (conjunto de reglas Hadolint)](https://elysiatools.com/es/tools/dockerfile-linter): Pega un Dockerfile y ejecuta análisis estático estilo Hadolint sin daemon de Docker: etiquetas de imagen base, USER root, sudo, higiene de apt/apk/yum/dnf, fijado de versiones de npm/pip/yarn, ADD vs COPY, fusión de capas, pipefail, puertos EXPOSE, secretos en ENV y más de 30 reglas clasificadas por severidad con línea, motivo y ejemplo de corrección, más una vista del código anotada línea a línea. - [Generador de sprite sheet SVG](https://elysiatools.com/es/tools/svg-sprite-generator): Sube hasta 30 iconos SVG y combínalos en un solo sprite sheet: modo para en línea, modo para fragmentos de archivo externo. Normaliza el viewBox (derivado de width/height), deduplica iconos, opcionalmente elimina fill/stroke para currentColor, siempre limpia y atributos on\*, y genera fragmentos de uso para HTML / React / Vue / CSS con vista previa en vivo de cada icono. - [Extractor de imagenes y captions PDF](https://elysiatools.com/es/tools/pdf-image-caption-extractor): Extrae imagenes PDF, empareja captions cercanos y genera un indice HTML navegable - [Extractor de paleta de color desde imagen](https://elysiatools.com/es/tools/image-color-palette-extractor): Sube una imagen, extrae colores dominantes y exporta tokens listos para codigo con verificacion de contraste ## Ejemplos - [Muestras de HTML con Imágenes](https://elysiatools.com/es/samples/html-with-images): Muestras de código fuente HTML con imágenes para probar la extracción - [Muestras HTML](https://elysiatools.com/es/samples/html-viewer-samples): Archivos de muestra para el visor HTML en el navegador - [Muestras PDF](https://elysiatools.com/es/samples/pdf-samples): Muestras PDF generadas por herramientas 2026-02-01 a 2026-02-10 - [Muestras de Comunicación en Tiempo Real WebRTC](https://elysiatools.com/es/samples/webrtc-samples): Muestras completas de WebRTC para comunicación de audio/video P2P, canales de datos, compartir pantalla y servidor de señalización ## Contenido relacionado - [Herramientas para minificar y formatear código](https://elysiatools.com/es/hubs/code-minify-beautify-format-tools): Prepara código y marcado para revisión o entrega con formato legible, salida compacta y comprobaciones de conservación.