HTML Email Template Cheat Sheet: Tags That Work Everywhere
Reviewed by Jerry Croteau, Founder & Editor
Table of Contents
Email HTML lives in a parallel universe where half of CSS doesn't exist, tables are the only layout tool, and every client renders things differently. If you've ever built a beautiful email template only to see it shattered in Outlook, this cheat sheet is for you.
Below is a quick reference of what works, what's risky, and what to avoid entirely — based on real compatibility across Gmail, Outlook, Apple Mail, Yahoo, and mobile clients.
Tags That Work Everywhere
These HTML elements render consistently across all major email clients:
Structure: <table>, <tr>, <td>, <th> — the backbone of every email layout. Use tables for everything, even things that should be a simple <div>. It's ugly code, but it works.
Text: <h1> through <h6>, <p>, <br>, <strong>, <em>, <span>, <a> — all work reliably. Always set font styles inline on each element, because <style> blocks in the head are stripped by Gmail (non-app) and some older clients.
Images: <img> — works everywhere, but many clients block images by default until the user clicks "show images." Always include descriptive alt text and set width and height attributes to prevent layout shifts when images are blocked.
Lists: <ul>, <ol>, <li> — work in most clients. Outlook adds extra spacing around lists that you can't fully control, but the content renders correctly.
CSS Properties That Work
These inline CSS properties are safe across email clients when applied directly to elements via the style attribute:
Typography: font-family, font-size, font-weight, font-style, color, text-align, text-decoration, line-height — all reliable. Use web-safe font stacks: Arial, Helvetica, sans-serif or Georgia, Times New Roman, serif. Custom web fonts are ignored by most email clients.
Box model: padding (on <td> elements), width (fixed pixels, not percentages on nested tables in Outlook), height, border — these work but test carefully. Use padding on table cells for spacing rather than margin, which is unreliable in Outlook.
Colors: background-color (on <td>), color — use hex codes (#FF5733), not named colors or RGB functions. Some older clients don't parse rgb() or rgba().
CSS Properties to Avoid
Layout: display: flex, display: grid, float, position — none of these work reliably across email clients. Outlook ignores them entirely. Use table-based layouts instead.
Box model traps: margin (unreliable in Outlook — use table cell padding or spacer cells), max-width (Outlook ignores it — use fixed width), box-sizing (inconsistent support).
Visual: border-radius (ignored by Outlook desktop), box-shadow (ignored by most clients), opacity (inconsistent), transform (unsupported). These won't break your layout, but they'll be invisible to Outlook users — about 10-15% of business email opens.
Selectors and blocks: <style> blocks in <head> are stripped by Gmail (web), some Yahoo clients, and older Android email apps. Always inline your styles. Media queries work in Apple Mail, iOS Mail, and Gmail app — but not in Outlook or Gmail web, so don't rely on them as your only responsive strategy.
The Safe Email Skeleton
Here's the minimal structure that works everywhere. Paste this into the HTML Previewer to see it rendered, then customize from there:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body style="margin:0;padding:0;background-color:#f4f4f4">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4">
<tr>
<td align="center" style="padding:20px 0">
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="background-color:#ffffff">
<tr><td style="padding:30px;font-family:Arial,sans-serif;font-size:16px;color:#333333">
<h1 style="margin:0 0 15px;font-size:24px;color:#1a1a1a">Your Subject</h1>
<p style="margin:0 0 15px">Your content goes here.</p>
</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Key details: the outer table spans 100% width with the background color, the inner table is fixed at 600px (the email standard), role="presentation" tells screen readers these tables are for layout not data, and all styles are inline.
Testing Your Template
Before sending, paste your complete email HTML into the HTML Previewer and toggle through the responsive breakpoints. Desktop width shows you the standard view. Mobile width (375px) shows you the worst case — what happens when the email client ignores your media queries and just renders at phone width.
If it looks acceptable at 375px with no media queries, it'll survive any email client. That's the baseline. Media queries can enhance the experience for clients that support them, but the no-query version must work.
Quick Reference Table
Works everywhere: <table> layout, inline styles, font-family, font-size, color, background-color, padding on <td>, width (fixed px), border, text-align, line-height, <img> with width/height/alt.
Works in most clients (not Outlook desktop): border-radius, background-image, media queries, <style> blocks, max-width.
Avoid entirely: flexbox, grid, position, float, margin (use padding instead), CSS variables, calc(), web fonts, box-shadow.
Bookmark this page for quick reference, and use the HTML Previewer to test every template before it ships.
Related Calculators
Get smarter with numbers
Weekly calculator breakdowns, data stories, and financial insights. No spam.
Discussion
Be the first to comment!
