📝Markdown & HTML

HTML Email Boilerplate

A table-based structure for cross-client email compatibility.

Explanation

Email clients have very limited CSS support, requiring old-school table layouts for reliable rendering.

Examples

Email Shell

Output

<table width="100%" cellpadding="0" cellspacing="0">...

Code Examples

HTML Email

<!DOCTYPE html>
<html>
<head>
  <style>
    .content { padding: 20px; font-family: sans-serif; }
    .btn { background: #6366f1; color: white; padding: 10px 20px; text-decoration: none; }
  </style>
</head>
<body style="margin: 0; padding: 0;">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center">
        <table width="600" class="content">
          <tr>
            <td>
              <h1>Hello!</h1>
              <p>This is a responsive email.</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

💡 Tips

Use inline styles for maximum compatibility
Base width of 600px is safe for most clients
Test your emails with tools like Litmus or Email on Acid

⚠️ Common Pitfalls

Avoid modern CSS like Flexbox or Grid; they break in Outlook