What the HTML Email Compatibility Checker does
This HTML email checker reads your email's code and lists what will break, client by client: CSS properties missing from Gmail's published support list, elements and properties that classic Outlook for Windows ignores because it renders HTML with Microsoft Word, layout techniques such as flexbox that collapse there, missing alt text and width attributes, unbalanced Outlook conditional comments, and HTML heavy enough to be clipped by Gmail.
Every Gmail and Outlook finding comes from the vendors' own documentation - Google's list of CSS properties and media queries Gmail supports, and Microsoft's reference for the Word rendering engine - stored with its review date. Checks that are good practice rather than documented rules are labelled as such.
How to use it
- Paste the complete HTML of your email, or drop the .html file exported from your email platform.
- Press Check HTML. The code is scanned as text in your browser; it is never rendered, run or uploaded.
- Work through the Gmail and Outlook groups first - these are the clients with the most documented limits - then the general and accessibility findings.
- Use the line numbers to find each issue in your code. Findings from a style block point to the line where that block starts.
- Copy or download the report to share with whoever builds the template.
Reading the results
Problems (red) are things that will fail: forms and scripts, missing alt text, an unclosed Outlook conditional comment, or HTML over the size Gmail is reported to clip.
Warnings (amber) are features a client documents as unsupported. The email may still look acceptable if you have a fallback - for example a solid background colour behind a background image - so check that the fallback exists.
Notes (blue) are context, such as Word ignoring display, which many templates rely on only for mobile clients.
A clean report is not a rendering test. It means the code avoids documented pitfalls; always send a test to the clients your audience uses.
Worked example: a newsletter built like a web page
The web-style example uses a linked font stylesheet, CSS variables, a flexbox card row, a dark-mode media query, div boxes with width and padding, a background image, two images without alt text and a sign-up form.
The checker reports 4 problems (both images lack alt text; the form, input and button do not work in Outlook) and 14 kinds of warning, including gap and var() missing from Gmail's list, prefers-color-scheme not being a media feature Gmail documents, and width and padding on div elements, which Microsoft lists as unsupported in Outlook.
The table-based example says the same thing in email-safe code: role="presentation" tables with width attributes, padding on td cells, an image with alt text and a width attribute, a max-width media query Gmail documents, and balanced <!--[if mso]> wrappers. It has no problems, one warning-free style block, and only notes.
Why email HTML is different
Email clients do not share a browser engine. Gmail rewrites your CSS and keeps only the properties on its supported list. Classic Outlook for Windows, including current Microsoft 365 desktop versions, still renders with Word, which supports a subset of CSS 1 and ignores most layout properties. Apple Mail uses WebKit and supports far more. The newer Outlook for Windows and Outlook on the web behave differently again.
That is why reliable email templates still use nested tables with width attributes, inline styles on table cells, and conditional comments for Outlook, and treat anything modern as a progressive enhancement.
Gmail clipping
Gmail shows only the first part of a long message and replaces the rest with a "View entire message" link. Email service providers consistently report the threshold as about 102 KB of HTML. Google does not document the number, so this tool labels it as reported rather than official. Clipping can hide your unsubscribe link and the open-tracking pixel, so staying well under it matters.
Limitations: what the result does not prove
- It does not render the email. Screenshots in real clients, or a rendering service, are still needed before an important send.
- Only Gmail and classic Outlook for Windows are checked against vendor lists, because those are the clients that publish them. Apple Mail, Yahoo and the new Outlook are not rule-checked.
- Microsoft's reference was written for Outlook 2007; later classic Outlook versions use the same Word engine, but individual behaviours may have changed.
- It checks the HTML you paste. Your email platform may add tracking, links and footers that change the size and markup.
Privacy: where your data goes
Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- Google for Developers - Gmail: CSS support
- Microsoft Learn - Word 2007 HTML and CSS rendering capabilities in Outlook 2007
- W3C - Web Content Accessibility Guidelines 2.2: non-text content
Frequently asked questions
Why does my email look broken in Outlook?
Classic Outlook for Windows renders HTML with Microsoft Word, which ignores flexbox, grid, floats, positioning, max-width and background images, and does not apply width or padding to div elements. Layouts built from nested tables with widths on td cells survive; web-style layouts collapse. The Outlook group in this report lists what your code relies on.
Which CSS does Gmail support in emails?
Google publishes the list: about 165 properties including fonts, colours, borders, border-radius, margin, padding, width and display, plus style blocks and media queries on all or screen with width, orientation and resolution features. Properties outside the list may be removed. This tool checks your CSS against that list, dated to when it was last reviewed.
Can I use flexbox or CSS grid in HTML email?
Only as an enhancement. Flex and grid work in some clients such as Apple Mail, but Word-based Outlook ignores display entirely and the layout collapses to one column in an unpredictable way. Build the structure with tables and use flexbox, if at all, inside a media query for clients you have tested.
What size of HTML email gets clipped in Gmail?
Email service providers report that Gmail clips messages whose HTML is larger than about 102 KB. Google does not publish this figure. The checker warns from 80% of that size, because your sending platform usually adds tracking links and code after you export.
Do forms work in HTML emails?
Not reliably. Microsoft lists form, input, button and select as unsupported in Outlook, and many webmail clients disable or strip form fields for security. Put a clear button-style link to a web page with the form instead.
Why do email images need alt text and width attributes?
Many people read email with images blocked, and screen reader users hear the alt text instead of the image, so alt text carries the message when the picture cannot. The width attribute tells older clients how large to draw the image; without it classic Outlook can show it at full file size.
What are Outlook conditional comments?
Comments such as <!--[if mso]> ... <![endif]--> that only Outlook's Word engine reads. Templates use them to give Outlook fixed-width tables or VML backgrounds while other clients ignore the content. If one is left unclosed, Outlook can hide everything after it, which is why the checker counts both halves.
Last reviewed by the A2Z.Tools team against the sources listed above.
