Skip to main content

HTML for Email — Newsletters & Templates

Mentor's Note: Email HTML is like building a website in 1999 — tables everywhere, inline styles, and zero JavaScript. Every email client renders your code differently (Gmail strips <style> tags, Outlook uses Word's rendering engine, and dark mode messes with your colours). The secret? Keep it simple, test everywhere, and embrace the constraints.

Why Email HTML is Different​

Building an email is not like building a web page. Email clients are notoriously inconsistent — they strip CSS, block JavaScript, and render HTML through embedded engines that are years behind browsers.

Key Differences at a Glance​

FeatureWeb PagesEmail HTML
JavaScriptFull support❌ Not supported (blocked for security)
CSS <style> tagYes❌ Stripped by Gmail, partial in others
Inline stylesOptional✅ Required for Gmail compatibility
LayoutFlexbox, Grid, CSS layouts✅ Tables only
External stylesheetsYes❌ Not supported
ImagesAVIF, WebP, many formats✅ JPG, PNG, GIF only (AVIF/WebP not reliable)
FormsFull support⚠️ Basic links only — no form submission
Max widthFluid/responsive⚠️ Usually 600px max
Fonts@font-face, variable fonts⚠️ Web-safe fonts only (Arial, Georgia, Tahoma)

Table-Based Layout Structure​

Email HTML relies on <table> elements for layout. This is the only reliable way to get consistent rendering across all email clients.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email Template</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f4f4f4;">
  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f4f4f4;">
    <tr>
      <td align="center" style="padding: 20px 0;">
        <!-- Main container — 600px max width -->
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="background-color: #ffffff; border-radius: 8px;">
          <tr>
            <td style="padding: 40px 30px;">
              <h1 style="font-family: Arial, Helvetica, sans-serif; color: #333333; font-size: 28px; margin: 0 0 10px 0;">
                Welcome to Our Newsletter
              </h1>
              <p style="font-family: Arial, Helvetica, sans-serif; color: #666666; font-size: 16px; line-height: 1.5; margin: 0 0 20px 0;">
                This is a minimal email template. Each email client renders it differently, so we use tables, inline styles, and web-safe fonts.
              </p>
              <a href="https://example.com" style="display: inline-block; font-family: Arial, sans-serif; background-color: #0066cc; color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 4px; font-size: 16px;">
                Read More
              </a>
            </td>
          </tr>
        </table>
        <!-- /Main container -->

        <!-- Footer -->
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="background-color: transparent;">
          <tr>
            <td align="center" style="padding: 20px 30px;">
              <p style="font-family: Arial, sans-serif; color: #999999; font-size: 12px; margin: 0;">
                You received this email because you signed up for our newsletter.
                <br>
                <a href="*|UNSUBSCRIBE|*" style="color: #999999; text-decoration: underline;">Unsubscribe</a>
              </p>
            </td>
          </tr>
        </table>
        <!-- /Footer -->
      </td>
    </tr>
  </table>
</body>
</html>

Why Tables?​

Email clients have varying CSS support — many ignore display: flex, grid, position, and float. Tables (<table>, <tr>, <td>) are the only layout mechanism with near-universal support. Every professional email template uses them.

Always include role="presentation" on layout tables — this tells screen readers to ignore the table markup and read the content directly.

Inline Styles — Required for Gmail​

Gmail strips <style> tags from the <head>. All styles must be inline to work reliably:

<!-- ❌ Won't work in Gmail — stripped by the email client -->
<style>
  .button { background-color: blue; color: white; }
</style>

<!-- ✅ Works everywhere — styles applied directly to the element -->
<a href="https://example.com" style="display: inline-block; background-color: #0066cc; color: #ffffff; text-decoration: none; padding: 12px 24px;">
  Click Here
</a>

Some email clients (Apple Mail, Outlook.com, Yahoo) do support <style> tags, but the safest approach is to inline everything.

Inlining Tools​

Writing inline styles by hand is tedious. Use these tools to automate it:

ToolTypeHow It Works
Campaign Monitor InlinerWebPaste HTML + CSS, get inlined output
JuiceNode.js CLI / librarynpm install juice — CLI and programmatic
PremailerRuby / WebServer-side or web interface
EmailCombinerWebCombines and inlines CSS

DOs and DON'Ts of Email HTML​

✅ DOs​

  • Use tables for layout — the only reliable cross-client approach
  • Inline every style — required for Gmail compatibility
  • Set width and max-width — target 600px maximum width
  • Use web-safe fonts — Arial, Georgia, Times New Roman, Verdana, Tahoma
  • Add alt text to images — alt="Description" for accessibility and when images are blocked
  • Include a plain-text version — some clients prefer it, and it helps with spam filters
  • Test in multiple clients — what works in Gmail breaks in Outlook
  • Use role="presentation" — on layout tables for accessibility

❌ DON'Ts​

  • Don't use JavaScript — blocked by every email client
  • Don't use <style> tags alone — supplement with inline styles for Gmail
  • Don't use CSS Flexbox or Grid — Outlook and Gmail don't support them
  • Don't use <form> elements — email can't submit forms
  • Don't rely on background images — many clients strip them
  • Don't use custom fonts with @font-face — falls back unpredictably
  • Don't use <video> or <audio> — not supported in email
  • Don't use position: absolute/fixed — Outlook uses Word engine, breaks positioning

Testing Tools​

You can't rely on a single email client preview. Every client renders differently, and the only way to be sure is to test.

ToolWhat It DoesPricing
LitmusPreviews in 100+ email clients (Gmail, Outlook, Apple Mail, Yahoo, etc.)Paid (free trial)
Email on AcidSimilar to Litmus, with accessibility testingPaid (free trial)
PutsmailQuick previews in major clientsFree
MailtrapTest sending without reaching real inboxesFree tier available
Can I EmailReference for CSS and HTML feature support across clientsFree

Always send a test to at least: Gmail (web + app), Outlook (Windows + macOS + app), Apple Mail, and Yahoo Mail before sending to your list.

Complete Minimal Email Template​

Here's a production-ready minimal email template. This structure works across all major email clients:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Monthly Newsletter</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f6f6f6; font-family: Arial, Helvetica, sans-serif;">
  <!-- Background wrapper -->
  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f6f6f6;">
    <tr>
      <td align="center" style="padding: 40px 10px;">

        <!-- Email container — 600px max -->
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 600px; background-color: #ffffff; border-radius: 8px; overflow: hidden;">

          <!-- Header -->
          <tr>
            <td align="center" style="background-color: #1a1a2e; padding: 30px 20px;">
              <h1 style="font-family: Georgia, Times, serif; color: #ffffff; font-size: 28px; margin: 0;">
                Monthly Digest
              </h1>
            </td>
          </tr>

          <!-- Hero image -->
          <tr>
            <td align="center" style="padding: 0;">
              <img src="https://placehold.co/600x250/eee/333?text=Hero+Image" alt="Monthly newsletter hero" width="600" height="250" style="display: block; width: 100%; max-width: 600px; height: auto; border: 0;">
            </td>
          </tr>

          <!-- Content -->
          <tr>
            <td style="padding: 30px 30px 20px;">
              <h2 style="font-family: Georgia, Times, serif; color: #1a1a2e; font-size: 22px; margin: 0 0 15px 0;">
                This Month's Highlights
              </h2>
              <p style="color: #555555; font-size: 16px; line-height: 1.6; margin: 0 0 15px 0;">
                Here's what happened this month. We've been busy building new features and fixing bugs. Read on for the full rundown.
              </p>
              <a href="https://example.com" style="display: inline-block; background-color: #0066cc; color: #ffffff; text-decoration: none; padding: 12px 28px; border-radius: 4px; font-size: 16px; font-weight: bold;">
                Read the Blog →
              </a>
            </td>
          </tr>

          <!-- Divider -->
          <tr>
            <td style="padding: 0 30px;">
              <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                  <td style="border-bottom: 1px solid #eeeeee; height: 1px; line-height: 1px; font-size: 1px;">&nbsp;</td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- Two-column section (side-by-side) -->
          <tr>
            <td style="padding: 20px 30px;">
              <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                  <!-- Left column -->
                  <td width="50%" style="vertical-align: top; padding-right: 15px;">
                    <img src="https://placehold.co/260x150/eee/333?text=Article+1" alt="Article one" width="260" height="150" style="display: block; width: 100%; max-width: 260px; height: auto; border: 0;">
                    <h3 style="color: #1a1a2e; font-size: 16px; margin: 10px 0 5px;">Article One</h3>
                    <p style="color: #666; font-size: 14px; line-height: 1.5; margin: 0 0 10px;">Brief description of the first article goes here.</p>
                    <a href="https://example.com" style="color: #0066cc; font-size: 14px; text-decoration: underline;">Read more →</a>
                  </td>
                  <!-- Right column -->
                  <td width="50%" style="vertical-align: top; padding-left: 15px;">
                    <img src="https://placehold.co/260x150/eee/333?text=Article+2" alt="Article two" width="260" height="150" style="display: block; width: 100%; max-width: 260px; height: auto; border: 0;">
                    <h3 style="color: #1a1a2e; font-size: 16px; margin: 10px 0 5px;">Article Two</h3>
                    <p style="color: #666; font-size: 14px; line-height: 1.5; margin: 0 0 10px;">Brief description of the second article goes here.</p>
                    <a href="https://example.com" style="color: #0066cc; font-size: 14px; text-decoration: underline;">Read more →</a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

        </table>
        <!-- /Email container -->

        <!-- Footer -->
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 600px;">
          <tr>
            <td align="center" style="padding: 20px 30px;">
              <p style="font-family: Arial, sans-serif; color: #999999; font-size: 12px; line-height: 1.5; margin: 0 0 5px;">
                You're receiving this because you subscribed to our newsletter.
              </p>
              <p style="font-family: Arial, sans-serif; color: #999999; font-size: 12px; margin: 0;">
                <a href="*|UNSUBSCRIBE|*" style="color: #999999; text-decoration: underline;">Unsubscribe</a> |
                <a href="*|UPDATE_PROFILE|*" style="color: #999999; text-decoration: underline;">Update preferences</a>
              </p>
              <p style="font-family: Arial, sans-serif; color: #bbbbbb; font-size: 11px; margin: 10px 0 0;">
                Company Name, 123 Street, City, Country
              </p>
            </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>
</body>
</html>

This template includes:

  • Table-based layout
  • All styles inlined
  • Web-safe fonts
  • Responsive 600px max-width
  • Two-column section using nested tables
  • Proper alt text on all images

🔗 Related Topics​