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
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.
CSS in Email
The subset of CSS properties supported across email clients, dominated by inline styles and constrained by Gmail and Outlook limitations.
Dark Mode
Dark mode in email refers to how email clients render messages when the recipient has dark mode enabled. It affects colour display, image rendering, and readability. Designers use CSS media queries and hybrid coding techniques to control the dark mode appearance.
Dynamic Content
Dynamic content in email refers to content blocks that change based on subscriber data, behavior, or preferences within a single email send.
Email Accessibility
Email accessibility ensures marketing emails are usable by people with disabilities, including those using screen readers, keyboard navigation, or assistive technologies. It follows WCAG 2.1 guidelines for structure, contrast, semantics, and descriptive content.
Email Animation
The use of motion in email through animated GIFs, CSS animations, and video embeds with fallback strategies.
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.