HTML email boilerplate
A table-based email shell that survives Outlook and Gmail.
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Acme — April dispatch</title>
<!--[if mso]>
<noscript><xml><o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings></xml></noscript>
<![endif]-->
<style>
body, table, td { font-family: Arial, Helvetica, sans-serif; }
@media (max-width: 620px) {
.wrap { width: 100% !important; }
.pad { padding: 20px !important; }
.stack { display: block !important; width: 100% !important; }
}
</style>
</head>
<body style="margin:0;padding:0;background:#eef1f6;">
<!-- preview text: shown in the inbox list, hidden in the email -->
<div style="display:none;max-height:0;overflow:hidden;opacity:0;">
New linen shirts, and a note on washing them properly.
</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#eef1f6;">
<tr>
<td align="center" style="padding:24px 12px;">
<table role="presentation" class="wrap" width="600" cellpadding="0" cellspacing="0" border="0"
style="width:600px;max-width:600px;background:#ffffff;border-radius:8px;">
<tr>
<td class="pad" style="padding:32px 40px 8px;">
<h1 style="margin:0;font-size:24px;line-height:1.3;color:#16202e;">April dispatch</h1>
</td>
</tr>
<tr>
<td class="pad" style="padding:8px 40px 24px;font-size:16px;line-height:1.6;color:#5b6b83;">
<p style="margin:0 0 16px;">New linen shirts are in, cut from the same cloth as last spring.</p>
<p style="margin:0;">Below, a short note on washing linen so it lasts.</p>
</td>
</tr>
<tr>
<td class="pad" style="padding:0 40px 36px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://example.com/"
style="height:44px;v-text-anchor:middle;width:180px;" arcsize="18%" fillcolor="#3b4fe4" stroke="f">
<w:anchorlock/><center style="color:#ffffff;font-family:Arial;font-size:15px;">Read the note</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-- -->
<a href="https://example.com/"
style="display:inline-block;background:#3b4fe4;color:#ffffff;text-decoration:none;
font-size:15px;padding:13px 28px;border-radius:8px;">Read the note</a>
<!--<![endif]-->
</td>
</tr>
<tr>
<td class="pad" style="padding:20px 40px 32px;border-top:1px solid #e2e7ef;
font-size:12px;line-height:1.6;color:#8593ab;">
Acme, 12 Mill Lane, Leeds LS1 4DT<br>
<a href="{{unsubscribe_url}}" style="color:#8593ab;">Unsubscribe</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>How it works
Email is not the web. Outlook on Windows renders with Microsoft Word's engine, Gmail strips your <style> block in several contexts, and support for anything from the last fifteen years is patchy. Tables and inline styles are not nostalgia — they are the only things that work everywhere.
Nested tables for layout. The outer table sets the background and centres. The inner one is your fixed 600-pixel content column. 600 is the convention because it fits the Outlook reading pane without horizontal scrolling.
role="presentation" on every layout table. Without it, a screen reader announces "table with 4 rows" and reads out cell coordinates. With it, the table is skipped and only the content is read.
Inline styles win. Gmail removes the <style> block when a message is forwarded or clipped, so anything that matters goes in a style attribute. The style block is for the media query only, which cannot be inlined.
The MSO conditional block forces Outlook to 96 DPI. Without it, Outlook on some Windows display settings scales everything by 125 percent and your 600-pixel layout becomes 750.
The VML button. Outlook ignores border-radius and padding on an anchor, so the clickable area collapses to the text itself. The v:roundrect block draws a real button for Outlook only; the normal anchor is hidden from it and shown to everything else.
The preview text div controls the grey line next to the subject in an inbox list. Leave it out and clients use the first text they find, which is usually "View this email in your browser".
Accessibility notes
Set lang on the html element and role="presentation" on every layout table. Give every image real alt text — around half of recipients have images blocked by default, so for them the alt text is the email.
Do not rely on colour alone for meaning, and keep body text at 16 pixels or more. Many people read email on a phone at arm's length.
Making it yours
Gmail clips messages over roughly 102 KB and shows a "view entire message" link, which breaks tracking and loses readers. Keep the file small — the HTML minifier helps, though test afterwards, because collapsing whitespace between inline elements can shift nested-table layouts.
Replace {{unsubscribe_url}} with whatever merge syntax your sending platform uses. An unsubscribe link is a legal requirement under CAN-SPAM and GDPR, not a courtesy.
Related templates
Minimal HTML5 boilerplate
The shortest document that is still correct. Nine lines, nothing optional.
HTMLSEO-ready HTML boilerplate
A full head block with meta, Open Graph, Twitter cards and structured data.
HTMLCSSSingle-file landing page
A complete landing page in one file — hero, features, call to action.
HTMLCSSPricing table
Three tiers with a highlighted plan and a monthly-to-yearly toggle.
HTMLCSSJavaScriptCheck your version
Once you have edited this, the HTML validator will catch any tag you left unclosed, and the formatter will tidy the indentation. Both run in your browser.