Why Email HTML Is Different from Web HTML

If you're comfortable building web pages, you might assume those same skills transfer directly to email signatures. Unfortunately, email HTML is a very different beast. Email clients like Outlook, Gmail, and Apple Mail each have their own rendering engines with severe limitations:

No external stylesheets: Most email clients strip <link> tags and ignore external CSS files entirely.
No <style> blocks (in many clients): Outlook and older clients often ignore or strip <style> tags in the <head>.
No modern CSS: Flexbox, CSS Grid, CSS variables, and media queries are unsupported or inconsistent.
No JavaScript: All email clients block JavaScript for security reasons.
No <div> layouts: Outlook uses Microsoft Word's rendering engine, which doesn't reliably support <div>-based layouts.

The result? Email signatures must be built using table-based layouts with inline styles — techniques from the early 2000s web. It's not glamorous, but it's what works.

Core Principles of Email Signature HTML

📐 Table-Based Layouts

Use HTML <table>, <tr>, and <td> elements for all layout structure. Tables render consistently across every email client, including Outlook's Word-based engine.

🎨 Inline Styles

Apply all CSS directly on elements using the style="" attribute. This is the only reliable way to ensure your styling survives email client processing.

🔤 Safe Fonts

Stick to web-safe fonts like Arial, Helvetica, Georgia, Times New Roman, and Verdana. Custom fonts via @font-face are not supported in most email clients.

Basic Email Signature HTML Structure

Here's a simple, real-world example of a table-based email signature:

<table cellpadding="0" cellspacing="0" border="0"
  style="font-family:Arial,Helvetica,sans-serif;font-size:14px;
  color:#333333;line-height:1.4;">
  <tr>
    <td style="padding-right:15px;vertical-align:top;">
      <img src="https://example.com/photo.jpg"
        width="80" height="80" alt="Photo"
        style="border-radius:50%;display:block;" />
    </td>
    <td style="vertical-align:top;">
      <strong style="font-size:16px;color:#1a1a1a;">
        Jane Smith
      </strong><br />
      <span style="color:#666666;">
        Marketing Manager
      </span><br />
      <span style="color:#666666;">
        Acme Pty Ltd
      </span><br />
      <span style="font-size:13px;">
        📞 +61 2 1234 5678 &nbsp;|&nbsp;
        📧 [email protected]
      </span>
    </td>
  </tr>
</table>

Key things to note in this example:

cellpadding="0" cellspacing="0" border="0" — Resets all table spacing for predictable rendering.
All styling is done via style="" attributes — no classes, no external CSS.
Images use explicit width and height attributes for consistent sizing.
Line breaks use <br /> tags rather than margins or padding for spacing.

Image Hosting for Email Signatures

Images in email signatures should always be hosted externally and referenced via absolute URLs. Here's why:

Don't embed images as attachments: Embedded images (CID attachments) increase email size and often display as attachments in some clients.
Use HTTPS URLs: Always use https:// links. Some email clients block images loaded over plain HTTP.
Optimise file sizes: Keep images under 50 KB. Use PNG for logos with transparency, JPEG for photos.
Set explicit dimensions: Always include width and height attributes on <img> tags to prevent layout shifts when images are blocked.
Include alt text: Add meaningful alt attributes — many email clients block images by default and show alt text instead.

What Works and What Doesn't

✅ What Works

HTML tables for layout
Inline styles (style="")
Web-safe fonts
Hosted images (HTTPS)
Basic HTML tags (strong, em, a, br, span)
Hex colour codes
HTML entities for special characters
Width attributes on tables and images

❌ What Doesn't Work

<div>-based layouts
CSS Grid or Flexbox
External stylesheets
<style> blocks (unreliable)
JavaScript
CSS variables (custom properties)
@font-face or custom fonts
Background images (inconsistent)
SVG images (limited support)
Media queries (most clients)

Web-Safe Fonts for Email Signatures

These fonts are available on virtually all devices and email clients:

Sans-serif: Arial, Helvetica, Verdana, Tahoma, Trebuchet MS
Serif: Georgia, Times New Roman, Palatino
Monospace: Courier New, Courier

Always include a font stack with fallbacks, e.g., font-family: Arial, Helvetica, sans-serif;

Testing Your Signature

Before deploying your email signature, test it thoroughly:

Send test emails to yourself on Gmail, Outlook (web and desktop), Apple Mail, and your mobile email app.
Check with images blocked — most email clients block images by default for new senders. Ensure your signature is readable with alt text only.
Test on mobile — view your test emails on both iOS and Android devices to verify the layout doesn't break on small screens.
Check dark mode — an increasing number of email clients support dark mode. Make sure your signature is legible on dark backgrounds.
Validate your HTML — run your signature code through an HTML validator to catch any unclosed tags or syntax errors.

Tips for Clean Email Signature HTML

Keep the total HTML under 10 KB: Large signatures can trigger spam filters or be truncated by email clients.
Use absolute URLs for everything: All links and image sources must be full URLs (starting with https://).
Avoid shorthand CSS: Instead of margin: 0 10px, use margin-top:0;margin-right:10px;margin-bottom:0;margin-left:10px; for maximum compatibility.
Use RGB or hex colours: Avoid CSS colour names (e.g., "red") — always use hex codes like #FF0000.
Close all tags: Self-close tags like <br /> and <img /> for XHTML compatibility.
Don't nest tables too deeply: One or two levels of table nesting is fine. More than three levels can cause rendering issues in Outlook.

🎯 Skip the HTML headaches entirely. Our signature generator handles all the cross-client HTML complexity for you — just fill in your details and get a production-ready signature. Create your signature →

HTML Basics for Email Signatures