Definition
HTML email is email that uses HyperText Markup Language to structure and style content beyond what plain text can achieve. It enables senders to include brand colors, typography, images, buttons, layouts, and interactive elements. HTML email is the standard format for marketing, transactional, and newsletter communications because it provides a richer, more engaging experience for recipients.
Developing HTML email is fundamentally different from building for the web. Email clients vary dramatically in their support for HTML and CSS, with Outlook on Windows using Microsoft Word's rendering engine and Gmail stripping certain CSS properties. This fragmented landscape requires specialized coding techniques that prioritize broad compatibility over modern web standards.
How It Works
HTML email development relies on table-based layout because it is the only layout method consistently supported across all email clients. CSS properties are applied inline on individual elements because many email clients strip styles from the head section or external stylesheets. Conditional comments and proprietary CSS hacks are used to target specific clients, particularly Outlook for Windows.
The hybrid coding approach uses tables for structural layout while employing modern CSS for visual styling within cells. This provides solid layout compatibility while still supporting responsive design, hover effects, and other enhancements in clients that support them. A typical HTML email starts with a doctype declaration optimized for email, followed by a container table, nested tables for header, content, and footer sections, and inline styles throughout.
Best Practices
Code with the lowest common denominator in mind and progressively enhance for capable clients. Use tables for overall page structure and inline CSS for all styling. Keep your HTML email between 600 and 640 pixels wide for desktop and design mobile-first with a single column. Test every email in the real versions of Gmail, Outlook (2007-2019, 365), Apple Mail, Yahoo, and at least one mobile mail client. Use a responsive email framework like MJML or Foundation for Emails to simplify development. Validate your HTML for accessibility and follow email-specific accessibility guidelines. Minimize the use of images for critical content since images are often blocked by default.
Related Glossary Terms
Accessible CTA (Email)
An accessible CTA is a button or link coded with sufficient colour contrast, visible focus states, descriptive screen-reader text, and a minimum touch target of 44×44 pixels.
Adaptive Design
Adaptive design in email uses predefined layouts that adjust to specific device or client widths, rather than fluidly resizing to every possible screen.
AMP for Email
AMP for Email is a technology that allows interactive, dynamic content to live inside an email message, enabling forms, carousels and live updates.
AMP for Email
AMP for Email is a Google-developed framework that allows email messages to include interactive elements like forms, carousels, accordions, and live content. It turns static emails into dynamic, interactive experiences directly inside the inbox.
Autoplay Video in Email
Autoplay video in email refers to the limited ability to play video content automatically when an email is opened, using specific client-supported techniques.
CSS in Email
The subset of CSS properties supported across email clients, dominated by inline styles and constrained by Gmail and Outlook limitations.
Frequently Asked Questions
Outlook on Windows renders HTML using the Microsoft Word engine, which does not support modern CSS layout properties like flexbox, grid, floats, or positioning. Tables are the only cross-client reliable layout method.
Safe properties include color, background-color, font-family, font-size, font-weight, text-align, padding, margin, border, width, and max-width. Avoid properties like position, float, display (other than none), overflow, and z-index which have inconsistent support.
Use media queries for email clients that support them, combined with a fluid hybrid layout that works without media queries. The hybrid approach uses a fixed-width desktop layout with CSS that allows content to stack on smaller screens.
No. Gmail strips head styles and has specific CSS limitations. Gmail supports inline styles but ignores certain properties like background images, web fonts, and some border properties. Gmail's CSS support has improved over time but still has notable gaps.
Dark mode is a display setting where email clients show dark backgrounds with light text. Support it by adding meta tags for color scheme detection and using CSS media queries like `@media (prefers-color-scheme: dark)` to switch colors and images appropriately.