HTML — Lesson 25
HTML Email Templates
Building email-compatible HTML with table-based layouts.
HTML Email Templates
Email HTML is more restrictive than web HTML. Most email clients have limited CSS support, so table-based layouts and inline styles are the standard.
Why Email HTML is Different
- Most email clients strip
<style>blocks and<link>tags - Flexbox and Grid are not supported
- External stylesheets are not loaded
- JavaScript is completely blocked
- Some clients strip the
<head>entirely
Basic Email Structure
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table width="600" cellpadding="20">
<tr>
<td style="font-family:Arial,sans-serif;color:#333;">
<h1>Welcome!</h1>
<p>Thank you for signing up.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
Key Rules for Email HTML
| Rule | Why |
|---|---|
| Use tables for layout | Flexbox/Grid have no support |
| Inline all styles | <style> tags are stripped |
| Use web-safe fonts | Custom fonts often fail |
| Set width to 600px | Standard email width |
| Use role="presentation" | Helps screen readers skip layout tables |
| Include text version | Some clients block HTML |
Responsive Email
<style>
/* Only works in clients that support <style> */
@media (max-width: 600px) {
.email-content { width: 100% !important; }
.mobile-pad { padding: 10px !important; }
}
</style>
Email Best Practices
- Preheader text: Add a hidden text preview after the opening
<body> - Image alt text: Many clients block images by default
- CTA buttons: Use bulletproof buttons with VML for Outlook
- Test widely: Use Litmus or Email on Acid to test across clients
- Unsubscribe link: Required by law (CAN-SPAM, GDPR)
Tip: Use email-specific tools like MJML or Foundation for Emails to write responsive email templates without dealing with raw HTML table structures.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →