🚀AdvancedDocument Output
HTML Email Fundamentals
Build cross-client HTML emails using table-based layouts, inline styles, and defensive CSS patterns that work in Gmail, Outlook, and Apple Mail.
Overview
HTML email is a distinct discipline from web HTML email clients strip most CSS, ignore many HTML features, and render completely differently from web browsers. Outlook renders HTML using Microsoft Word's rendering engine. Gmail strips `<head>` styles in some contexts. Apple Mail is the most capable but represents fewer users.
The key constraints: use table-based layouts (not CSS flexbox/grid), inline all CSS (no external stylesheets), use px units (not rem/em), avoid JavaScript (never executed), use absolute image URLs (no relative paths), and test extensively in email preview tools like Litmus or Email on Acid.
Modern email does support some CSS (media queries for responsiveness, a limited set of selectors in `<style>` blocks), but you must always have a table-based fallback for the worst-case rendering environment.
Key Points
- •Use table layouts CSS flexbox/grid are ignored in Outlook and many clients
- •Inline all CSS styles many clients strip `<head>` CSS or `<link>` tags
- •Images need absolute URLs relative URLs don't work in email (different domain context)
- •Always include `alt` on images images are blocked by default in most clients
- •Use px for sizes, not rem/em email has no root font size concept
- •No JavaScript email clients do not execute scripts for security
- •Include a plain text alternative (`text/plain` part) alongside HTML for accessibility
Examples
Basic cross-client HTML email structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Email Title</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
/* Limited CSS in head for clients that support it */
@media only screen and (max-width: 600px) {
.container { width: 100% !important; }
.col { display: block !important; width: 100% !important; }
}
</style>
</head>
<body style="margin:0; padding:0; background-color:#f5f5f5;">
<!-- Outer wrapper table -->
<table width="100%" cellpadding="0" cellspacing="0" border="0"
style="background-color:#f5f5f5;">
<tr>
<td align="center" style="padding:40px 0;">
<!-- Email container 600px max width -->
<table class="container" width="600" cellpadding="0" cellspacing="0"
border="0" style="background-color:#ffffff; border-radius:8px;">
<!-- Header -->
<tr>
<td style="background-color:#3b82f6; padding:32px; text-align:center;
border-radius:8px 8px 0 0;">
<img src="https://yoursite.com/logo.png" alt="Your Company"
width="120" height="40" style="display:block; margin:0 auto;">
</td>
</tr>
<!-- Body content -->
<tr>
<td style="padding:32px 40px;">
<h1 style="font-family:Arial,sans-serif; font-size:24px;
color:#1e293b; margin:0 0 16px 0;">
Welcome to Our Service
</h1>
<p style="font-family:Arial,sans-serif; font-size:16px;
color:#475569; line-height:1.5; margin:0 0 24px 0;">
Thank you for signing up. Click below to get started.
</p>
<!-- CTA Button: table-based for Outlook compatibility -->
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-color:#3b82f6; border-radius:6px;
text-align:center;">
<a href="https://yoursite.com/start"
style="display:inline-block; padding:14px 28px;
font-family:Arial,sans-serif; font-size:16px;
color:#ffffff; text-decoration:none;
font-weight:600;">
Get Started
</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background-color:#f8fafc; padding:24px 40px;
border-top:1px solid #e2e8f0; border-radius:0 0 8px 8px;">
<p style="font-family:Arial,sans-serif; font-size:12px;
color:#94a3b8; margin:0; text-align:center;">
© 2024 Your Company · <a href="{{unsubscribe_url}}"
style="color:#94a3b8;">Unsubscribe</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Every styled element needs inline styles. The CTA button uses a nested table for Outlook compatibility.
Responsive email with media queries
<style>
/* Head styles work in most modern clients including Gmail (2019+) */
.email-body { width: 600px; }
.col-50 { width: 280px; display: inline-block; vertical-align: top; }
@media only screen and (max-width: 600px) {
.email-body { width: 100% !important; }
.col-50 {
display: block !important;
width: 100% !important;
}
}
</style>
<!-- Two-column layout that stacks on mobile -->
<table class="email-body" width="600" cellpadding="0" cellspacing="0">
<tr>
<!-- Left column -->
<td class="col-50" width="280" style="padding:16px;">
<img src="https://yoursite.com/feature1.png" alt="Feature 1"
width="248" height="160" style="display:block; max-width:100%;">
<h3 style="font-family:Arial; font-size:18px; color:#1e293b;">Feature 1</h3>
</td>
<!-- Right column -->
<td class="col-50" width="280" style="padding:16px;">
<img src="https://yoursite.com/feature2.png" alt="Feature 2"
width="248" height="160" style="display:block; max-width:100%;">
<h3 style="font-family:Arial; font-size:18px; color:#1e293b;">Feature 2</h3>
</td>
</tr>
</table>Outlook ignores media queries the desktop table layout is the Outlook view. Media queries apply for Gmail and Apple Mail on mobile.
Common Mistakes
- Using relative image URLs email is opened from any context; images must use absolute https:// URLs
- Relying on Google Fonts or web fonts most email clients don't load external fonts; always provide system font fallbacks (Arial, Georgia, etc.)
- Building buttons with `<button>` or purely CSS use a table-based approach for Outlook compatibility
Note
Use an ESP (Email Service Provider) like SendGrid, Mailchimp, or Postmark for sending, and preview tools like Litmus or Email on Acid to test across 60+ clients. Always send a test to real Outlook before launch.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4