HTML Email

Email clients render HTML with their own, very limited engines — Outlook for Windows has historically used Microsoft Word's renderer. So HTML email is written differently from web pages.

The rules are different

• No JavaScript — it's stripped everywhere.
• No external stylesheets and patchy style support: important styles are inlined in style attributes. Build tools (MJML, Maizzle, Premailer) do this automatically.
• Tables for layout — the one place where layout tables are still normal, because older Outlook versions don't support modern CSS layout. Mark them role="presentation" so screen readers don't announce them as data tables.
• Widths around 600 pixels, with fluid styles for phones.
• Many clients block images by default — the email must make sense without them, and every image needs alt text.

A minimal email

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light dark">
    <title>Your order is ready</title>
  </head>
  <body style="margin: 0; padding: 0; background-color: #f4f1ec;">
    <!-- Wrong for the web, normal for email: obsolete layout attributes below -->
    <div style="display: none; max-height: 0; overflow: hidden;">Pick it up any time before 18:00 today.</div>
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
      <tr>
        <td align="center" style="padding: 24px;">
          <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="max-width: 600px; width: 100%; background-color: #ffffff;">
            <tr>
              <td style="padding: 24px; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #222222;">
                <h1 style="margin: 0 0 16px; font-size: 24px;">Your order is ready</h1>
                <p style="margin: 0 0 16px;">Hi Sam, your rye loaf is waiting at the counter.</p>
                <a href="https://cornerbakery.example/orders/1042" style="display: inline-block; padding: 12px 20px; background-color: #7a4b2a; color: #ffffff; text-decoration: none;">View order</a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

• The hidden div at the top is the preheader — the preview text shown after the subject line in the inbox.
• The outer table centers the content and paints the background; the inner 600-pixel table holds the message.
• align, width, cellpadding, and cellspacing are obsolete on the web, and the validator reports them — but they're still the most reliable way to lay out email in old clients. HTML email is the rare case where valid-for-the-web isn't the goal.
• The "button" is a styled link: it works everywhere, and it's a link because it goes somewhere.

Accessibility and deliverability

• Set lang, use real headings and paragraphs, and make link text descriptive.
• Send a plain-text alternative part alongside the HTML.
• Keep the HTML small — Gmail clips messages larger than about 100 KB.
• Test in real clients (Litmus, Email on Acid, or your own accounts), including dark mode.