# Linter HTML pour email Vérifie la compatibilité cross-client des modèles HTML d'email : flex/grid non supporté, CSS non inline, pièges de rendu Word d'Outlook, problèmes de mise en page par tableaux et manques d'accessibilité. Couvre les limites connues de Gmail/Outlook/Apple Mail. > Page canonique: https://elysiatools.com/fr/tools/email-html-linter - **Catégorie:** Development - **Mots-clés:** html email, email html, linter email, compatible outlook, rendu gmail, css inline, vml, mise en page tableau, newsletter, modèle email ## Présentation Repérez les bugs HTML-email qui n'apparaissent que dans Outlook, Gmail et Apple Mail — avant l'envoi. \*\*Pourquoi l'email HTML est différent.\*\* L'email reste largement du HTML des années 90 rendu par des moteurs incohérents : Outlook utilise \*\*Microsoft Word\*\*, Gmail supprime la plupart des \`\`, Apple Mail est le plus clément. Flexbox, grid et position:fixed cassent dans la plupart des clients. \*\*Ce qu'il vérifie.\*\* CSS non supporté, CSS non inline, pièges Outlook (VML), mise en page par tableaux (role/cellpadding), images (alt/width), accessibilité (lang, contraste, formulaires/script). \*\*Niveaux.\*\* 🔴 Error, 🟡 Warning, 🔵 Info. Strict affiche les info ; Lenient seulement les erreurs et warnings clés. \*\*Limites.\*\* C'est un vérificateur de règles statique — il ne peut pas exécuter l'email dans de vrais clients. ## Entrées - **HTML de l'email** (textarea): Hello... - **Sévérité** (select) ## Quand l'utiliser - Avant d'envoyer une campagne d'emailing pour s'assurer d'un rendu correct sur tous les écrans. - Lors de l'intégration d'un nouveau modèle HTML utilisant des propriétés CSS modernes comme Flexbox ou Grid. - Pour déboguer des problèmes d'affichage spécifiques à Outlook Desktop ou à l'application mobile Gmail. ## Fonctionnement - Collez le code HTML de votre email dans le champ de saisie principal. - Choisissez le niveau de sévérité souhaité (Sévère, Équilibré ou Indulgent) pour filtrer les alertes. - Analysez le rapport généré qui liste les erreurs de rendu, les avertissements de compatibilité et les conseils d'accessibilité. ## Cas d'usage - Validation technique d'un gabarit d'email avant son intégration dans un outil de marketing automation. - Nettoyage du CSS moderne non supporté par Outlook lors de la conversion d'une page web en email. - Audit d'accessibilité et de délivrabilité des newsletters via la vérification des attributs alt et de la langue. ## Questions fréquentes ### Pourquoi Flexbox et Grid posent-ils problème dans les emails ? De nombreux clients de messagerie, notamment Outlook Desktop qui utilise le moteur de rendu de Microsoft Word, ne supportent pas ces propriétés CSS modernes. ### Faut-il obligatoirement utiliser des tableaux pour la mise en page ? Oui, les structures basées sur des tableaux HTML avec l'attribut role="presentation" restent la méthode la plus fiable pour garantir un rendu uniforme. ### Que fait l'option de sévérité "Indulgent" ? Elle masque les simples conseils d'accessibilité et d'optimisation pour ne remonter que les erreurs critiques et les avertissements majeurs. ### Pourquoi le linter recommande-t-il le CSS inline ? Gmail et d'autres clients de messagerie suppriment souvent les blocs de style situés dans le head, rendant les styles inline indispensables. ### Le linter permet-il de prévisualiser le rendu visuel de l'email ? Non, c'est un outil d'analyse statique du code. Pour tester le rendu visuel réel, il convient d'utiliser un service de test de boîte de réception. ## Outils associés - [Constructeur d'art direction responsive Picture / srcset](https://elysiatools.com/fr/tools/responsive-picture-srcset-art-direction-builder): Génère un balisage complet avec recadrages art direction : éléments par point d'arrêt, candidates 1x/2x ou descripteurs de largeur par modèle {w}, couches AVIF/WebP optionnelles, gestion de sizes, width/height anti-CLS, et déclinaisons HTML et JSX avec notes de lint fondées sur la spécification. - [Verificateur d accessibilite](https://elysiatools.com/fr/tools/accessibility-checker): Detecte les problemes WCAG 2.1 courants dans du HTML, des pages ou des maquettes et fournit des corrections concretes - [Générateur de Data URI](https://elysiatools.com/fr/tools/data-uri-generator): Convertit les fichiers en Data URI (Base64 ou pourcentage-encodé) pour intégrer images, polices et ressources directement dans HTML, CSS ou Markdown - [Generateur de rapport daudit daccessibilite](https://elysiatools.com/fr/tools/accessibility-audit-report-generator): Audite du HTML ou une URL pour detecter des problemes WCAG courants et exporte un PDF structure - [Linter Dockerfile (règles façon Hadolint)](https://elysiatools.com/fr/tools/dockerfile-linter): Collez un Dockerfile et obtenez une analyse statique façon Hadolint sans démon Docker : tags d'image de base, USER root, sudo, hygiène apt/apk/yum/dnf, épinglage npm/pip/yarn, ADD vs COPY, fusion de couches, pipefail, ports EXPOSE, secrets dans ENV — 30+ règles par sévérité avec ligne, cause et correctif, plus le code annoté ligne par ligne. - [Générateur de sprite sheet SVG](https://elysiatools.com/fr/tools/svg-sprite-generator): Téléversez jusqu'à 30 icônes SVG et fusionnez-les en une seule sprite sheet : mode pour en ligne, mode pour fragments de fichier externe. Normalise le viewBox (déduit de width/height), déduplique les icônes, peut retirer fill/stroke pour currentColor, nettoie toujours et attributs on\*, et génère les snippets HTML / React / Vue / CSS avec aperçu en direct de chaque icône. - [Extracteur dimages et captions PDF](https://elysiatools.com/fr/tools/pdf-image-caption-extractor): Extrait les images PDF, associe les captions voisines et genere un index HTML navigable - [Extracteur de palette couleur depuis image](https://elysiatools.com/fr/tools/image-color-palette-extractor): Charge une image, extrait les couleurs dominantes et exporte des tokens reutilisables avec controle du contraste ## Exemples - [Échantillons de HTML avec Images](https://elysiatools.com/fr/samples/html-with-images): Échantillons de code source HTML avec des images pour tester l'extraction - [Echantillons HTML](https://elysiatools.com/fr/samples/html-viewer-samples): Fichiers d exemple pour la visionneuse HTML dans le navigateur - [Exemples PDF](https://elysiatools.com/fr/samples/pdf-samples): Exemples PDF generes par les outils du 2026-02-01 au 2026-02-10 - [Exemples de Communication Temps Réel WebRTC](https://elysiatools.com/fr/samples/webrtc-samples): Exemples complets WebRTC pour communication audio/vidéo P2P, canaux de données, partage d'écran et serveur de signalisation ## Contenu associé - [Outils pour minifier et formater le code](https://elysiatools.com/fr/hubs/code-minify-beautify-format-tools): Préparez le code et le balisage pour la revue ou la livraison avec un format lisible, une sortie compacte et des contrôles de conservation.