# E-Mail-HTML-Linter Prüft Cross-Client-Kompatibilität von E-Mail-HTML-Vorlagen: nicht unterstützte Flex/Grid, nicht-inline CSS, Outlook-Word-Rendering-Fallen, Tabellen-Layout-Probleme und Barrierefreiheits-Mängel. Deckt die bekannten Einschränkungen von Gmail/Outlook/Apple Mail. > Kanonische Seite: https://elysiatools.com/de/tools/email-html-linter - **Kategorie:** Development - **Schlagwörter:** html email, email html, e-mail linter, outlook-kompatibel, gmail-rendering, inline-css, vml, tabellen-layout, newsletter, e-mail-vorlage ## Überblick Fängt die HTML-E-Mail-Bugs, die nur in Outlook, Gmail und Apple Mail auftauchen — vor dem Senden. \*\*Warum E-Mail-HTML anders ist.\*\* E-Mail ist weitgehend HTML aus den 90ern, gerendert von inkonsistenten Engines: Outlook nutzt \*\*Microsoft Word\*\*, Gmail entfernt die meisten \`\`, Apple Mail ist am nachsichtigsten. Flexbox, Grid und position:fixed brechen in den meisten Clients. \*\*Was geprüft wird.\*\* Nicht unterstütztes CSS, nicht-inline CSS, Outlook-Fallen (VML), Tabellen-Layout (role/cellpadding), Bilder (alt/width), Barrierefreiheit (lang, Kontrast, Formulare/Script). \*\*Stufen.\*\* 🔴 Error, 🟡 Warning, 🔵 Info. Strict zeigt Info; Lenient nur Fehler und wichtigste Warnungen. \*\*Grenzen.\*\* Dies ist ein statischer Regel-Prüfer — kann die E-Mail nicht in echten Clients ausführen. ## Eingaben - **E-Mail-HTML** (textarea): Hello... - **Strenge** (select) ## Wann verwenden - Vor dem Versenden von HTML-Newslettern, um Darstellungsfehler in Outlook und Gmail zu vermeiden. - Beim Debuggen von E-Mail-Vorlagen, die moderne CSS-Eigenschaften wie Flexbox oder Grid enthalten. - Zur Überprüfung von Barrierefreiheit und Tabellen-Layouts in E-Mail-Kampagnen. ## Funktionsweise - Fügen Sie den HTML-Code Ihrer E-Mail-Vorlage in das Eingabefeld ein. - Wählen Sie die gewünschte Strenge der Prüfung aus (Streng, Ausgewogen oder Nachsichtig). - Der Linter analysiert den Code auf nicht unterstütztes CSS, fehlende Tabellenattribute und Outlook-spezifische Rendering-Fallen. - Sie erhalten einen detaillierten Bericht mit Fehlern, Warnungen und Hinweisen zur Behebung. ## Anwendungsfälle - Validierung von Newsletter-Templates vor dem Import in E-Mail-Marketing-Tools. - Bereinigung von modernem CSS in E-Mails durch Identifizierung nicht unterstützter Styles. - Optimierung von Tabellen-Layouts für die fehlerfreie Darstellung in Outlook-Desktop-Clients. ## Häufig gestellte Fragen ### Warum meldet der Linter Fehler bei Flexbox oder Grid? Die meisten E-Mail-Clients, insbesondere Outlook (das Microsoft Word zum Rendern nutzt), unterstützen kein Flexbox oder Grid. Verwenden Sie stattdessen Tabellen-Layouts. ### Was bewirkt die Option 'Strenge'? Sie filtert die Meldungen: 'Streng' zeigt alle Hinweise inklusive Barrierefreiheit, während 'Nachsichtig' nur kritische Fehler ausgibt. ### Warum sollte CSS in E-Mails inline sein? Viele E-Mail-Clients, wie Gmail auf Mobilgeräten, entfernen \-Blöcke im Header. Inline-Styles garantieren eine konsistente Darstellung. ### Kann dieser Linter meine E-Mail in echten Clients rendern? Nein, dies ist ein statischer Regel-Prüfer. Für visuelle Tests sollten Sie Dienste wie Litmus oder Email on Acid nutzen. ### Was bedeutet die Warnung bezüglich 'role=presentation' bei Tabellen? Dieses Attribut teilt Screenreadern mit, dass die Tabelle nur für das Layout und nicht für tabellarische Daten verwendet wird, was die Barrierefreiheit verbessert. ## Ähnliche Tools - [Responsive Picture / srcset Art-Direction-Builder](https://elysiatools.com/de/tools/responsive-picture-srcset-art-direction-builder): Erzeugt vollständiges \-Markup mit Art-Direction-Zuschnitten: \-Elemente je Breakpoint, 1x/2x-Kandidaten oder Breitendeskriptoren per {w}-Vorlage, optionale AVIF/WebP-Schichten, sizes-Behandlung, CLS-sicheres width/height sowie HTML- und JSX-Varianten mit spec-basierten Lint-Hinweisen. - [Barrierefreiheitspruefer](https://elysiatools.com/de/tools/accessibility-checker): Erkennt haeufige WCAG-2.1-Probleme in HTML, Seiten oder Designbildern und liefert direkt umsetzbare Hinweise - [Data-URI-Generator](https://elysiatools.com/de/tools/data-uri-generator): Konvertiert Dateien in Data URIs (Base64 oder prozent-kodiert), um Bilder, Schriftarten und Ressourcen direkt in HTML, CSS oder Markdown einzubetten - [Barrierefreiheits-Auditbericht-Generator](https://elysiatools.com/de/tools/accessibility-audit-report-generator): Prueft HTML oder eine URL auf haeufige WCAG-Probleme und exportiert einen strukturierten PDF-Bericht - [Dockerfile-Linter (Hadolint-Regelsatz)](https://elysiatools.com/de/tools/dockerfile-linter): Füge ein Dockerfile ein und erhalte eine statische Analyse im Hadolint-Stil ohne Docker-Daemon: Basis-Image-Tags, USER root, sudo, Paketmanager-Hygiene (apt/apk/yum/dnf), npm/pip/yarn-Pinning, ADD vs. COPY, Layer-Zusammenfassung, pipefail, EXPOSE-Ports, Secrets in ENV — 30+ Regeln nach Schwere mit Zeile, Grund und Fixbeispiel plus zeilenannotierte Quellansicht. - [SVG-Sprite-Sheet-Generator](https://elysiatools.com/de/tools/svg-sprite-generator): Lade bis zu 30 SVG-Icons hoch und füge sie zu einem Sprite-Sheet zusammen: \-Modus für inline , \-Modus für externe Datei-Fragmente. Ergänzt viewBox (aus width/height), dedupliziert Icons, entfernt optional fill/stroke für currentColor, säubert immer und on\*-Attribute und erzeugt HTML-/React-/Vue-/CSS-Snippets mit Live-Vorschau jedes Icons. - [PDF-Bild- und Caption-Extraktor](https://elysiatools.com/de/tools/pdf-image-caption-extractor): Extrahiert PDF-Bilder, ordnet nahe Captions zu und erstellt einen durchsuchbaren HTML-Index - [Bild-Farbpaletten-Extraktor](https://elysiatools.com/de/tools/image-color-palette-extractor): Laedt ein Bild hoch, extrahiert dominante Farben und exportiert codefertige Tokens mit Kontrastpruefung ## Beispiele - [HTML mit Bildern Proben](https://elysiatools.com/de/samples/html-with-images): HTML-Quellcodeproben mit Bildern zum Testen der Extraktion - [HTML-Beispiele](https://elysiatools.com/de/samples/html-viewer-samples): Beispieldateien fuer den Browser-basierten HTML-Viewer - [PDF-Beispiele](https://elysiatools.com/de/samples/pdf-samples): Generierte PDF-Beispiele von Tools zwischen 2026-02-01 und 2026-02-10 - [WebRTC Echtzeitkommunikation Beispiele](https://elysiatools.com/de/samples/webrtc-samples): Umfassende WebRTC-Beispiele für P2P Audio/Video-Kommunikation, Datenkanäle, Bildschirmfreigabe und Signalisierungsserver ## Verwandte Inhalte - [Werkzeuge zum Minifizieren und Formatieren von Code](https://elysiatools.com/de/hubs/code-minify-beautify-format-tools): Bereiten Sie Code und Markup für Prüfung oder Auslieferung mit lesbarem Format, kompakter Ausgabe und Erhaltkontrollen vor.