# Email HTML Linter

Check email HTML templates for cross-client compatibility: unsupported CSS, non-inline styles, Outlook traps, table layout issues, and accessibility gaps.

> Canonical page: https://elysiatools.com/en/tools/email-html-linter

- **Category:** Development

- **Keywords:** email html, html email, email linter, outlook compatible, gmail render, inline css, vml, table layout, newsletter, email template

## Overview

Catch the HTML-email bugs that only show up in Outlook, Gmail, and Apple Mail — before you send. \*\*Why email HTML is different.\*\* Email is still largely 1990s HTML rendered by inconsistent engines: Outlook desktop uses \*\*Microsoft Word\*\* to render HTML (yes, really), Gmail strips most \`\` blocks, Apple Mail is the most forgiving but still quirky. Flexbox, grid, and \`position: fixed\` break in most clients. Tables-based layout is not retro — it is the reliable default. \*\*What this linter checks.\*\* - \*\*Unsupported CSS\*\* — \`display: flex/grid\`, \`position: fixed/absolute\`, \`<picture>\`, \`background-image\` without a fallback color, modern units (\`vh\`, \`vw\`, \`rem\`). - \*\*Non-inline CSS\*\* — \`<style>\` blocks in \`<head>\` work in some clients but are stripped by Gmail on mobile; recommends inlining critical styles. - \*\*Outlook traps\*\* — missing MSO conditional comments (\`<!--\[if mso\]>\`) for VML backgrounds, images without explicit \`width\`, buttons relying on \`border-radius\` (Outlook ignores it). - \*\*Table layout\*\* — \`<table>\` without \`role="presentation"\`, missing \`cellpadding/cellspacing=0\`, nested tables without borders reset. - \*\*Images\*\* — missing \`alt\`, no \`width\`/\`height\` (causes reflow), \`<img>\` as the only content (spam-risk), oversized images. - \*\*Accessibility & deliverability\*\* — missing \`lang\`, low-contrast text color, tracking pixels without \`alt=""\`, forms/\`<input>\` (broken in most clients). - \*\*Links\*\* — \`<a>\` without explicit \`color\`, mailto without subject. \*\*Severity levels.\*\* - 🔴 \*\*Error\*\* — will break in major clients (flex layout, missing table attrs). - 🟡 \*\*Warning\*\* — inconsistent across clients (\`<style>\` in head, border-radius buttons). - 🔵 \*\*Info\*\* — best-practice / accessibility (missing alt, lang attribute). \*\*Strictness.\*\* Strict surfaces info-level issues too; Lenient only flags errors and the most impactful warnings. \*\*Limitations.\*\* This is a static rule checker — it cannot run the email in actual clients. For pixel-perfect QA, pair it with a rendering service like Litmus or Email on Acid.</x-turndown>

## Inputs

- **Email HTML** (textarea): Hello...
- **Strictness** (select)

## When to use

- When preparing a newsletter template and you need to verify it renders correctly in Outlook desktop clients that use Microsoft Word for rendering.
- When optimizing email HTML to ensure critical styles are properly inlined and won't be stripped by Gmail on mobile devices.
- When auditing email templates for accessibility compliance, such as checking for missing image alt attributes and language tags.

## How it works

- Paste your raw email HTML code into the input area.
- Select your desired strictness level: Strict to see all warnings and accessibility tips, Balanced for standard checks, or Lenient to focus only on critical rendering errors.
- Review the generated report highlighting errors, warnings, and info-level issues with recommendations on how to fix them.

## Use cases

- Validating a newly coded HTML newsletter template before importing it into an email marketing platform.
- Debugging layout breakage issues specifically reported by Outlook desktop users.
- Auditing transactional email templates for accessibility standards and spam-triggering elements like missing image alt tags.

## Frequently asked questions

### Why does the linter flag flexbox and grid as errors?

Most versions of Outlook and several other email clients do not support modern CSS layouts like flexbox or grid, causing your email layout to break.

### What is the difference between the strictness levels?

Strict displays all errors, warnings, and accessibility tips; Balanced filters out minor warnings; Lenient only flags critical errors that break major clients.

### Why does the linter recommend inlining CSS?

Some email clients, particularly Gmail on mobile, strip blocks from the <head>, which can completely break your email's styling if it is not inlined.</x-turndown>

### Can this tool preview how my email looks in Outlook?

No, this is a static code analyzer that flags compatibility issues. For visual rendering previews, you should use services like Litmus or Email on Acid.

### Why is role="presentation" required on tables?

Screen readers read standard tables as data grids. Adding role="presentation" tells assistive technologies that the table is used purely for layout purposes.

## Related tools

- [Responsive Picture / srcset Art Direction Builder](https://elysiatools.com/en/tools/responsive-picture-srcset-art-direction-builder): Build complete markup with art-directed crops: per-breakpoint elements, 1x/2x density candidates or {w}-template width descriptors, optional AVIF/WebP format layers, sizes handling, CLS-safe width/height, plus HTML and JSX flavors with spec-based lint notes.
- [Accessibility Checker](https://elysiatools.com/en/tools/accessibility-checker): Detect common WCAG 2.1 accessibility issues in HTML, fetched pages, or design images and return fix-ready guidance
- [Data URI Generator](https://elysiatools.com/en/tools/data-uri-generator): Convert files into Data URIs (Base64 or percent-encoded) for inlining images, fonts, and assets directly into HTML, CSS, or Markdown
- [Accessibility Audit Report Generator](https://elysiatools.com/en/tools/accessibility-audit-report-generator): Audit HTML or a URL for common WCAG issues and export a structured PDF report grouped by severity
- [Dockerfile Linter & Best-Practices Checker](https://elysiatools.com/en/tools/dockerfile-linter): Hadolint-style static analysis for Dockerfiles without a Docker daemon: 30+ rules across image pinning, package-manager hygiene, layer caching, secrets and signal handling, with severities, line numbers and fix examples.
- [SVG Sprite Sheet Generator](https://elysiatools.com/en/tools/svg-sprite-generator): Merge up to 30 SVG icons into one sprite sheet (symbol or view mode) with viewBox normalization, dedup, optional currentColor stripping, sanitization, live preview and usage snippets.
- [PDF Image & Caption Extractor](https://elysiatools.com/en/tools/pdf-image-caption-extractor): Extract images from PDFs, match nearby captions, and generate an HTML index package using OpenDataLoader
- [Image Color Palette Extractor](https://elysiatools.com/en/tools/image-color-palette-extractor): Extract dominant colors from an image, export code-ready tokens, and check contrast ratios

## Samples

- [HTML with Images Samples](https://elysiatools.com/en/samples/html-with-images): HTML source code samples with images for testing extraction
- [HTML Viewer Samples](https://elysiatools.com/en/samples/html-viewer-samples): Sample HTML files (semantic page, form, landing page) for the in-browser HTML Viewer
- [PDF Samples](https://elysiatools.com/en/samples/pdf-samples): Generated PDF samples from tools dated 2026-02-01 to 2026-02-10
- [WebRTC Real-Time Communication Samples](https://elysiatools.com/en/samples/webrtc-samples): Comprehensive WebRTC samples for peer-to-peer audio/video communication, data channels, screen sharing, and signaling server implementation

## Related content

- [Code Minify, Beautify, and Format Tools](https://elysiatools.com/en/hubs/code-minify-beautify-format-tools): Prepare code and markup for review or delivery with readable formatting, compact output, and preservation checks.
