Email Signature HTML Guide — Complete Code Templates (2026)

Coding an HTML email signature is nothing like building a web page. The technologies look the same — HTML, CSS, images — but the rendering environment is radically different. Web browsers follow modern standards. Email clients follow whatever rules they invented fifteen years ago and never updated. Microsoft Outlook uses the Word rendering engine to display HTML emails. Gmail strips nearly all CSS from <style> blocks. Yahoo Mail adds its own wrapper styles that can override yours. The result: an email signature that looks perfect in your browser preview might render as an unformatted mess in your recipient's inbox.

This guide covers the complete technical reality of HTML email signature development. You'll learn why tables are the only reliable layout mechanism, how to write inline CSS that survives Gmail's sanitizer, how to handle images without breaking across clients, and how to test your work properly before deploying. Every recommendation is based on how email clients actually behave in 2026 — not how they should behave.

1. Why Email Signatures Need Table-Based HTML (Not Divs)

If you come from web development, this will feel like stepping back in time. Modern websites use CSS Grid, Flexbox, and semantic <div> elements for layout. Email signatures cannot. The reason is simple: email rendering engines don't support modern CSS layout.

Microsoft Outlook — still the dominant corporate email client — renders HTML emails using the Microsoft Word engine, not a browser engine. Word has no concept of flexbox, grid, or even reliable float behavior. When Outlook encounters a <div> with display: flex, it ignores the CSS entirely and renders the div as a block element. Your carefully designed side-by-side layout collapses into a vertical stack. Your columns overlap or disappear.

The Can I Email database is the definitive reference for checking CSS and HTML support across email clients. Think of it as caniuse.com, but for email. Before using any CSS property in your signature, check it here first. The results are often sobering — features you take for granted on the web simply don't exist in email.

The practical conclusion: use <table>, <tr>, and <td> for all layout structure. It feels archaic, but it's the only approach that renders consistently across every major email client. Add role="presentation" to every layout table so screen readers understand these are structural elements, not data tables. Set cellpadding="0", cellspacing="0", and border="0" on every table to eliminate default spacing.

The Fundamental Table Structure

Every HTML email signature follows this basic pattern: an outer table that sets the maximum width and contains the entire signature, with inner table rows for each section (name, title, contact info, social links). For horizontal layouts where you have a photo on the left and text on the right, you nest a table inside a table cell. Here's the skeleton:

<table cellpadding="0" cellspacing="0" border="0"
  role="presentation" style="max-width:600px;">
  <tr>
    <td style="padding:0;">
      <!-- Photo column -->
    </td>
    <td style="padding:0 0 0 12px; vertical-align:top;">
      <!-- Text column: name, title, contact -->
    </td>
  </tr>
</table>

This structure works in every email client because tables are the lowest common denominator of HTML rendering. Outlook renders them. Gmail renders them. The webmail client your recipient's company built internally in 2012 renders them. It's ugly in source code, but it's bulletproof in practice.

2. Complete HTML Email Signature Template

Here's a complete, production-ready HTML email signature template. This template uses a horizontal layout with a headshot on the left and contact details on the right, separated by a colored vertical divider. It's been tested across Gmail, Outlook (desktop, web, and mobile), Apple Mail, Thunderbird, and Yahoo Mail.

Copy this code, replace the placeholder values with your own details, host your images on a reliable CDN, and paste it into your email client. For instructions on pasting HTML signatures, see our guides for Gmail and Outlook.

<table cellpadding="0" cellspacing="0" border="0"
  role="presentation"
  style="font-family:Arial,Helvetica,sans-serif;
         max-width:600px; width:100%;">
  <tr>
    <!-- Headshot -->
    <td style="padding:0; vertical-align:top; width:80px;">
      <img
        src="https://yourdomain.com/images/headshot.jpg"
        alt="Jane Smith headshot"
        width="80" height="80"
        style="border-radius:50%; display:block;
               width:80px; height:80px;"
      />
    </td>
    <!-- Divider -->
    <td style="padding:0 16px; vertical-align:top; width:2px;">
      <div style="width:2px; height:80px;
                  background-color:#6C5CE7;"></div>
    </td>
    <!-- Contact Details -->
    <td style="padding:0; vertical-align:top;">
      <table cellpadding="0" cellspacing="0" border="0"
        role="presentation">
        <tr>
          <td style="padding:0 0 2px 0;">
            <span style="font-size:16px; font-weight:bold;
                         color:#1a1a1a;">
              Jane Smith
            </span>
          </td>
        </tr>
        <tr>
          <td style="padding:0 0 8px 0;">
            <span style="font-size:13px; color:#666666;">
              Marketing Director &bull; Acme Corp
            </span>
          </td>
        </tr>
        <tr>
          <td style="padding:0 0 4px 0;">
            <a href="tel:+15551234567"
              style="font-size:12px; color:#333333;
                     text-decoration:none;">
              &#9742; +1 (555) 123-4567
            </a>
          </td>
        </tr>
        <tr>
          <td style="padding:0 0 4px 0;">
            <a href="mailto:[email protected]"
              style="font-size:12px; color:#6C5CE7;
                     text-decoration:none;">
              [email protected]
            </a>
          </td>
        </tr>
        <tr>
          <td style="padding:0 0 4px 0;">
            <a href="https://acme.com"
              style="font-size:12px; color:#6C5CE7;
                     text-decoration:none;">
              acme.com
            </a>
          </td>
        </tr>
        <tr>
          <td style="padding:8px 0 0 0;">
            <!-- Social Icons -->
            <a href="https://linkedin.com/in/janesmith"
              style="text-decoration:none; margin-right:8px;">
              <img src="https://yourdomain.com/icons/linkedin.png"
                alt="LinkedIn" width="20" height="20"
                style="display:inline-block; width:20px;
                       height:20px;" />
            </a>
            <a href="https://twitter.com/janesmith"
              style="text-decoration:none; margin-right:8px;">
              <img src="https://yourdomain.com/icons/twitter.png"
                alt="X/Twitter" width="20" height="20"
                style="display:inline-block; width:20px;
                       height:20px;" />
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

This template deliberately uses only features that work everywhere. No flexbox, no grid, no CSS classes, no media queries in the HTML itself. Every style is inline. Every image has explicit dimensions. Every color is a hex code, not an HSL or RGB value. The trade-off is verbose code — but verbose code that actually works beats clean code that breaks in Outlook.

Don't want to write HTML by hand? Use Byline's signature generator to create a professionally designed, cross-client tested signature in seconds. It generates the same table-based HTML you see above, but with a visual editor instead of a code editor. Pick your colors using a tool like Hue to ensure your brand palette looks great.

3. Inline CSS Requirements

On the web, you write CSS in external stylesheets or <style> blocks and reference classes in your HTML. In email, that approach fails catastrophically. Gmail strips <style> blocks entirely from the <head> and <body>. Outlook ignores most CSS properties even when they're present. External stylesheet <link> tags are blocked by every major client for security reasons.

The only reliable approach is inline CSS — styles written directly in the style attribute of each HTML element. Every element that needs styling must carry its own styles. Yes, this means repeating font-family: Arial, Helvetica, sans-serif; on every text element. It's repetitive. It's unavoidable.

A critical nuance: border-radius is listed as "will break" but that needs context. It works in Gmail, Apple Mail, and Thunderbird — it just doesn't work in Outlook desktop. So a rounded headshot photo will look circular in most clients but square in Outlook. This is usually an acceptable trade-off because the image still displays correctly, just without rounded corners. The Can I Email border-radius entry shows the exact client-by-client breakdown.

Line-Height and Spacing Traps

Email clients add default line-height and spacing to elements in ways that are different from browsers. Outlook adds extra padding below images. Gmail adds line-height to empty table cells. The safest approach is to explicitly set line-height on every text element, add display: block on every <img> tag (prevents Outlook from adding spacing below), and use font-size: 0; line-height: 0; on empty spacer cells.

4. Image Handling in Email Signatures

Images in email signatures are simultaneously the element that has the most visual impact and the element most likely to break. Getting image handling right requires understanding three things: how email clients fetch images, how they display them, and what happens when they can't or won't load them.

Absolute URLs Are Non-Negotiable

Every image src attribute must be an absolute URL starting with https://. Email clients don't have a concept of a document root or base URL — they can't resolve relative paths like /images/logo.png. A relative URL will produce a broken image icon in every single email client. Always use the full URL: https://yourdomain.com/images/logo.png.

Use HTTPS exclusively. HTTP image URLs trigger security warnings in most modern email clients, and some clients block HTTP images entirely. Your image hosting must serve over HTTPS with a valid SSL certificate.

Always Set Width and Height Attributes

Set both width and height as HTML attributes on every <img> tag — not just in CSS. Outlook uses the HTML attributes to reserve space for images before they load. Without them, your signature layout shifts and collapses when images are blocked or still loading. This is especially important in corporate environments where images are blocked by default.

<!-- Correct: HTML attributes + CSS -->
<img src="https://cdn.example.com/logo.png"
     alt="Acme Corp Logo"
     width="150" height="40"
     style="display:block; width:150px; height:40px;" />

<!-- Wrong: CSS only, no HTML attributes -->
<img src="https://cdn.example.com/logo.png"
     style="width:150px; height:40px;" />

Alt Text for Every Image

Many corporate email environments block external images by default. Recipients see alt text instead of your logo or headshot until they click "Load images." Descriptive alt text ensures your signature still communicates effectively even when images are blocked. Use alt="Jane Smith, Marketing Director" for headshots and alt="Acme Corp logo" for company logos. For decorative social media icons, use alt="LinkedIn" so readers can still identify the platform.

Image Format & Compression

Use JPEG for photographs (headshots) with 70–80% quality compression. Use PNG for logos and icons that need transparency. Avoid WebP, AVIF, and SVG — email client support for these formats remains incomplete even in 2026. According to Litmus's email design documentation, JPEG and PNG are the only universally safe formats. Keep total image weight under 100KB for the entire signature — individual images should be 10–30KB each.

Reliable Image Hosting

Your signature images live for as long as the email exists in someone's inbox — potentially years. Host them on infrastructure that won't disappear: your company CDN, AWS S3 + CloudFront, Google Cloud Storage, or Cloudflare R2. Never use temporary hosting services, Dropbox shared links, Google Drive links, or Imgur — these can expire, get rate-limited, or require authentication, resulting in broken images across every email you've ever sent.

5. Social Media Icons in HTML Signatures

Social media icons add visual interest and link your email contacts to your professional profiles. In HTML email signatures, implementing them correctly requires attention to image sizing, spacing, link formatting, and the critical decision of which platforms to include.

Implementation Pattern

Each social icon should be a PNG image (not SVG — Outlook doesn't support SVG) at 20–24px square, wrapped in an anchor tag. Use display: inline-block on each image and control spacing with margin-right on the anchor tags rather than padding. Here's the pattern:

<td style="padding:8px 0 0 0;">
  <a href="https://linkedin.com/in/yourname"
     style="text-decoration:none; margin-right:8px;"
     target="_blank" rel="noopener noreferrer">
    <img src="https://cdn.example.com/icons/linkedin.png"
         alt="LinkedIn" width="20" height="20"
         style="display:inline-block; width:20px;
                height:20px; border:0;" />
  </a>
  <a href="https://twitter.com/yourname"
     style="text-decoration:none; margin-right:8px;"
     target="_blank" rel="noopener noreferrer">
    <img src="https://cdn.example.com/icons/twitter.png"
         alt="X/Twitter" width="20" height="20"
         style="display:inline-block; width:20px;
                height:20px; border:0;" />
  </a>
</td>

Choosing Icon Style

Monochrome icons in a single color (your brand accent or a neutral gray) look the most polished and professional. Full-color brand icons (LinkedIn blue, YouTube red, X black) are recognizable but can clash with your signature's color scheme. Whichever style you choose, be consistent — don't mix monochrome and colored icons. Keep your social icons to 2–4 platforms maximum. LinkedIn is almost always appropriate. Add X/Twitter if you're active in your industry, GitHub for developer roles, or a portfolio site for creative fields.

6. Mobile-Responsive Signature HTML

Over 55% of emails are opened on mobile devices. Apple Mail on iPhone alone accounts for 35–40% of all email opens. Your HTML signature needs to work on screens as narrow as 320px — and the challenge is that @media queries, the standard tool for responsive design on the web, are stripped by Gmail and not reliably supported by many email clients.

Fluid Width Without Media Queries

The solution is to design fluid signatures that adapt without media queries. Set your outer table to width: 100% with a max-width: 600px. Use width: 100% on images alongside explicit pixel values in the HTML width attribute — this makes images scale down on smaller screens while maintaining their maximum size on desktop.

Keep your signature compact. On desktop, a 300px-tall signature is fine — it sits below the email content with plenty of room. On mobile, that same signature pushes the email body up and forces scrolling. Aim for under 200px total height. Every pixel counts on a 5-inch screen. Our design best practices guide covers mobile design principles in more detail.

7. Dark Mode Considerations

Dark mode adoption has exploded. Apple Mail, Gmail, Outlook, and virtually every mobile email client now offer dark mode, and a growing percentage of users leave it enabled permanently. For HTML email signatures, dark mode creates problems that don't exist on the web — because email clients handle dark mode differently, and most of them don't give you CSS hooks to respond.

Three Types of Dark Mode Behavior

Practical Dark Mode Rules for HTML Signatures

Use transparent PNG backgrounds for logos and icons — never place them on a white rectangle. Avoid hardcoded background-color: #ffffff on table cells unless absolutely necessary. Choose mid-tone brand colors (avoid pure black #000000 and pure white #FFFFFF) that maintain readability on both light and dark backgrounds. For logos that are too dark to see on dark backgrounds, create a version with a subtle light outline or padding built into the image itself.

Use Hue to test your brand colors against both light and dark backgrounds before embedding them in your signature. This avoids the common mistake of choosing an accent color that looks great on white but becomes invisible on dark gray.

8. Testing Across Email Clients

Testing is the most important step in HTML email signature development — and the step most people skip. The rendering differences between email clients are vast. A signature that looks perfect in your Gmail compose window might be completely broken when your client opens it in Outlook on Windows. You cannot assume. You must test.

Priority Testing Matrix

Testing Tools

Professional tools like Litmus and Email on Acid let you preview your HTML signature across dozens of email clients simultaneously. They're essential for organizations rolling out signatures to teams. For individual testing, send your signature to yourself across Gmail, Outlook.com, and iCloud — then check on both desktop and mobile. Use Byline's signature validator to catch common HTML issues before you even send a test email.

9. Common HTML Email Rendering Gotchas

Even with table-based layouts and inline CSS, email rendering is full of traps. Here are the most common issues and their fixes — collected from years of cross-client email development experience.

The Campaign Monitor CSS compatibility guide maintains a comprehensive table of which CSS properties are supported (or broken) in each email client. Bookmark it. When you encounter a rendering issue, check this guide first — chances are someone has already documented the problem and the fix.

All of these gotchas are why tools like Byline exist. The generator produces table-based HTML with all of these fixes pre-applied — display: block on images, border-collapse: collapse on tables, explicit colors on links, and optimized total HTML size. You can also check your website's meta tags and OpenGraph data with Clarity to ensure the URLs in your signature preview correctly when recipients click them.

Frequently Asked Questions