How an HTML email signature is built
Email programs are not browsers. Many of them remove style sheets, scripts and modern layout features, so the code for a signature follows older rules:
- Tables for layout. Columns and rows are made with table cells, and not with flexbox or grid.
- Inline styles. Every style sits in the style attribute of its own element. There are no classes and no style block.
- Safe fonts. Arial, Verdana, Tahoma, Georgia and similar fonts that every computer has. Web fonts are not loaded.
- Hosted images with fixed sizes. Each image has width and height attributes, a clear alt text and a full https address.
- Text links. A link needs no image, so it still works when images are blocked.
The code options
- Minify removes the line breaks and indents. It makes the code shorter, which helps with size limits, but it is harder to read.
- Wrap in a full HTML page adds the html, head and body tags. Use it for a file that you save and import. Leave it off to paste into an editor that expects only the signature.
- Plain text is a version without formatting, for programs and settings that accept only text.
Check the code before you use it
- Send a test email to yourself, and to a Gmail and an Outlook address if you can.
- Open it on a phone as well as a computer.
- Switch on the dark preview to see if the text stays readable on a dark background.
- Click every link.
You can tidy or compress the result with the HTML formatter, the HTML beautifier or the HTML minifier. For a ready to paste version, use the main generator, the Gmail version or the Outlook version. The email signature guide has design advice.