HTML Email Templates: What Works in Email Clients

HTML email is one of the strangest environments in web development. The same CSS that works flawlessly in every browser can be completely ignored — or actively broken — inside an email client. Outlook on Windows still renders HTML using Microsoft Word's rendering engine. Gmail strips <style> blocks in some contexts. Apple Mail is comparatively modern but has its own quirks. Building a reliable HTML email requires a fundamentally different approach than building a webpage. Draft your HTML email content using our free html editor online, then follow this guide to make it email-safe.

Why Email HTML Is Different

Web browsers have converged on a shared standard (HTML5 + CSS3). Email clients have not. Each email client has its own HTML/CSS parser, its own list of supported properties, and its own security filters. Some strip JavaScript entirely. Some rewrite inline style attributes. Some add their own styles on top of yours. The result is that email HTML development is closer to developing for IE6 than for modern browsers.

CSS That Works in Email

These CSS properties have broad support across major email clients:

Font properties: font-family, font-size, font-weight, font-style, color, line-height, text-align
Box model: margin, padding, border, width (as attributes AND styles)
Background: background-color (not background-image — many clients block images by default)
Display values: display:block, display:none (but not flexbox or grid)

CSS That Does NOT Work in Email

Flexbox and CSS Grid — not supported in Outlook or most Gmail contexts
CSS animations and transitions — stripped by most clients
Web fonts via @font-face or Google Fonts — fall back to system fonts in most clients
CSS variables (custom properties) — not supported
Shorthand margin/padding in some Outlook versions — use individual properties (margin-top, margin-right, etc.)
External stylesheets — always blocked

The Golden Rules of HTML Email

1. Use inline styles for everything critical

Email clients that strip <style> blocks (like Gmail when forwarded) will still respect inline styles. Write all visual styles as style="" attributes on each element. This is tedious to maintain but non-negotiable for cross-client consistency.

2. Use table-based layout

Tables are the only reliable layout system across all email clients, including Outlook. Use <table>, <tr>, and <td> for every structural layout decision. Set widths with both the HTML width attribute and the CSS style="width:" property — Outlook reads the attribute; other clients read the style.

<table width="600" style="width:600px;max-width:100%;
  border-collapse:collapse;margin:0 auto;">
  <tr>
    <td style="padding:20px;background:#ffffff;">
      Content here
    </td>
  </tr>
</table>

3. Set a max-width, not a fixed width

Use max-width:600px for the outer wrapper and let it collapse on mobile. A fixed width:600px causes horizontal scrolling on phones. Use width="100%" on the outermost table.

4. Always set explicit image dimensions

Never let images scale naturally in email. Set both width and height attributes, and add display:block to eliminate the gap that appears under images in some clients. Also include an alt attribute — many clients display only the alt text until the user clicks "Display images".

5. Clean up before sending

After building your template, run the full HTML through an html cleaner online to remove comments, unused styles, and any Word-generated markup if you drafted the content in Word. Then test in Litmus or Email on Acid before sending to your list.

The Minimal Reliable Email Template Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Email Subject</title>
</head>
<body style="margin:0;padding:0;background:#f4f4f4;">
  <table width="100%" style="background:#f4f4f4;">
    <tr><td align="center" style="padding:20px 0;">
      <table width="600" style="width:600px;max-width:100%;
        background:#ffffff;border-radius:8px;">
        <tr><td style="padding:32px;">
          <!-- Content -->
        </td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>

HTML email development is frustrating precisely because it requires abandoning a decade of web development progress. But understanding the constraints up front — tables for layout, inline styles, no flexbox — lets you build templates that work reliably in every client your subscribers use.