HTML Emails

Introduction

HTML emails are not like normal web pages. Email clients (Gmail, Outlook, Apple Mail) have strict limitations, old rendering engines, and no modern CSS support. This tutorial shows how to build reliable, professional HTML emails that work everywhere.

1. Use Table-Based Layout

Email clients hate flexbox, grid, and modern CSS. Tables are the only reliable layout.

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <table width="600" cellpadding="20" cellspacing="0">
        <tr>
          <td style="background:#1e1e1e; color:#fff;">
            Welcome to CodeTweakrs!
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

2. Use Inline CSS

<td style="font-size:16px; color:#e0e0e0;">
  Hello, Kaloyan!
</td>

3. Avoid External CSS Files

External CSS is blocked — always inline.

4. Images Must Use Absolute URLs

<img src="https://codetweakrs.net/images/logo.png" width="120">

5. Add ALT Text

<img src="banner.jpg" alt="CodeTweakrs Banner">

6. Buttons Must Be Table-Based

<table cellpadding="0" cellspacing="0">
  <tr>
    <td style="background:#64b5f6; padding:12px 20px;">
      <a href="https://codetweakrs.net"
         style="color:#000; text-decoration:none; font-weight:bold;">
        Visit Dashboard
      </a>
    </td>
  </tr>
</table>

7. Avoid JavaScript Entirely

Email clients block JS completely.

8. Use Web-Safe Fonts

9. Max Width Trick for Responsive Emails

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <table width="600" style="max-width:100%;" cellpadding="20" cellspacing="0">

10. Spacing Fix Using Padding

<td style="padding:20px;">

11. Background Colors

<td style="background:#1e1e1e; color:#fff;">

12. Avoid Forms in Emails

Most clients block them. Replace with a button linking to your site.

13. Dark Mode Compatibility

Some email clients force dark mode. Always test in:

14. Testing Tools

15. Full Minimal Email Template

<!DOCTYPE html>
<html>
<body style="margin:0; padding:0; background:#111;">
  <table width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center">
        <table width="600" cellpadding="20" cellspacing="0"
               style="background:#1e1e1e; color:#e0e0e0; max-width:100%;">
          <tr>
            <td style="font-size:24px; font-weight:bold;">
              CodeTweakrs Notification
            </td>
          </tr>
          <tr>
            <td style="font-size:16px;">
              Your tools have been updated successfully.
            </td>
          </tr>
          <tr>
            <td>
              <table cellpadding="12" cellspacing="0">
                <tr>
                  <td style="background:#64b5f6;">
                    <a href="https://codetweakrs.net"
                       style="text-decoration:none; color:#000; font-weight:bold;">
                      View Dashboard
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Summary