Email signature generator › HTML code

Email signature HTML code, explained

Email HTML is roughly web HTML from 1999, and that is not nostalgia — it is what Outlook still renders. Here is a template that survives, line by line.

The template

<table cellpadding="0" cellspacing="0" border="0"
       style="border-collapse:collapse;">
  <tr>
    <td valign="top"
        style="border-left:3px solid #4f46e5;padding-left:14px;">

      <span style="font-family:Arial,Helvetica,sans-serif;font-size:16px;
                   font-weight:bold;color:#14141a;">Alex Rivera</span>

      <div style="font-family:Arial,Helvetica,sans-serif;font-size:13px;
                  color:#5d5d6b;padding-top:2px;">
        Brand Designer &middot;
        <span style="color:#4f46e5;font-weight:bold;">Rivera Studio</span>
      </div>

      <div style="font-family:Arial,Helvetica,sans-serif;font-size:13px;
                  line-height:1.6;color:#5d5d6b;padding-top:8px;">
        <a href="tel:+35312345678"
           style="color:#5d5d6b;text-decoration:none;">+353 1 234 5678</a><br>
        <a href="https://riverastudio.com"
           style="color:#4f46e5;text-decoration:none;">riverastudio.com</a>
      </div>

    </td>
  </tr>
</table>

Why each choice

A table for layout

Not nostalgia. Outlook for Windows renders HTML with the Word engine, which has no support for flexbox, grid or reliable float. Tables are the only layout primitive every client agrees on. cellpadding, cellspacing and border are set to zero as attributes because older clients ignore the CSS equivalents.

border-collapse:collapse

Without it, some clients add invisible spacing between cells and the layout drifts a few pixels — enough to break an alignment you carefully set.

Inline styles on every element

Gmail strips <style> blocks in some contexts and external stylesheets are never fetched. A style that is not inline is a style that may not arrive. The repetition is the cost of reliability.

font-family repeated on each element

Font inheritance is unreliable across clients, and Apple Mail can override the whole signature with the message font. Naming the font on each text element is verbose but it is what stops a signature from being restyled in transit.

valign="top"

Default vertical alignment is middle in several clients. With a logo beside text, that centres the text against the image instead of aligning their tops.

padding, never margin

Outlook ignores margin on many block elements. Padding on a table cell is respected everywhere.

text-decoration:none plus an explicit colour on links

Clients apply their own link colour — often a blue that clashes — and iOS adds underlines to anything resembling a phone number or address. Setting both explicitly keeps control.

What email clients ignore

Pasting the code

Most signature boxes are visual editors: pasting raw HTML into them displays the code as text. Either paste the rendered signature (which is what Copy signature above puts on your clipboard), or find the client's HTML mode. Apple Mail is the notable case where editing the file directly is sometimes the only clean route.

Dark mode, and why not to fight it

Many clients now invert light backgrounds automatically, and they do it with their own rules rather than yours. A signature with hard-coded near-black text on an assumed white background can end up dark-on-dark.

The techniques that handle this properly in marketing email — prefers-color-scheme media queries, [data-ondark] attributes — rely on CSS that Outlook ignores and that Gmail strips. For a signature it is not worth the complexity. Two things are enough:

• Use greys with genuine contrast in both directions — #5d5d6b is readable on white and remains readable when inverted, where #eeeeee would not be.
• Do not set a background colour on the signature at all. Letting it inherit means the client's own inversion works with you rather than against you.

Accessibility, in two lines

Two small things make a signature work with a screen reader, and both cost nothing. Give every image an alt attribute describing what it is (alt="Rivera Studio", not alt="logo"). And keep the reading order in the markup the same as the visual order — with tables that is automatic, as long as you do not use empty cells to nudge things sideways.

What breaks accessibility completely is a signature rendered as one image: a screen reader announces nothing, and neither does a client with images blocked.

Frequently asked questions