The reference minimal sales signature: brand wordmark, vertical divider, name, title, nothing else. It reads instantly and never breaks across clients, the baseline every AE template should start from.
html email signature code
HTML email signature code
"Just give me the code" sounds simple until Outlook eats the layout and the image 404s for the recipient. HTML email signature code has to survive mail clients that strip CSS and render with a word processor. Here are the rules that make it work, why hand-coding usually fails, and how to get clean code with the image already hosted.
Last updated
TL;DR
Working email signature HTML uses tables for layout, inline CSS only, a hosted image (not a local file or data URI), web-safe or system fonts with fallbacks, and a plain-text version. Hand-coding all of that for Outlook is the hard part — export it from an editor, copy the rendered signature, and paste it into your mail client.
What HTML email signature code actually needs
Five rules separate signature HTML that renders everywhere from code that looks fine in your browser and breaks in the inbox.
- Tables for layout. Nested tables, not divs with flexbox or grid. Tables are the only layout primitive every mail client agrees on.
- Inline CSS only. Every style as a
styleattribute on the element. Style blocks and class selectors are commonly stripped. - A hosted image. The logo or headshot must sit at a stable public URL. Local files and data URIs break for recipients.
- Web-safe fonts with fallback. Custom fonts do not load in many clients; design on the fallback stack from the start.
- A plain-text version. Some clients show it; your name and contact details should still read without the HTML.
Why hand-coding signature HTML usually fails
Email HTML is not web HTML. It is closer to the HTML of the late
1990s, frozen in place because mail clients never modernized their
rendering. Modern markup quietly fails: clients strip
<style> blocks, ignore class selectors, and do not
support flexbox or grid.
Outlook for Windows is the sharpest edge. Per Microsoft's Outlook documentation , behavior differs by version, and Outlook on Windows renders mail with Microsoft Word's engine rather than a browser engine. Reliable layout there needs MSO conditional comments and table-based structure that almost no one writes correctly by hand.
How to get clean signature HTML
The reliable path is to build the signature in an editor and export it, so the table structure, inline styles, and Outlook handling are done for you — and the image is hosted, which a copied code sample from an article never is.
Open the editor, start from one of the email signature templates, customize it, and export. Then copy the rendered signature, not the raw markup — pasting raw HTML into a mail client shows the tags as text. Decide what actually belongs in it first with the anatomy of an email signature.
One Gmail-specific limit to know from Google's Gmail Help: a signature is capped at 10,000 characters and an embedded image counts toward it — another reason a hosted image beats a pasted data-URI image, which inflates the code.
How to use the code in your mail client
The signature HTML is the same everywhere; only the paste differs by client. Once you have the rendered signature, follow the guide for yours:
Common problems with signature HTML
Most failures trace back to four things:
- Broken image: the code points at an unhosted or temporary image URL.
- Outlook spacing: extra gaps or collapsed layout because the markup was not built for Word's engine.
- Stripped styling: styles were in a
<style>block instead of inline, so the client removed them. - Wrong font: a custom web font that does not load, with no fallback stack behind it.
For accessibility, the W3C Web Accessibility Initiative guidance applies: a logo wordmark that states the company name needs descriptive alt text; a decorative divider takes an empty alt.
Key takeaways
- Tables for layout, inline CSS only, hosted image, web-safe fonts with fallback, plain-text version.
- Email HTML is not web HTML; Outlook renders with Word's engine and needs defensive markup.
- Copy the rendered signature, never raw code, into your mail client.
- The reliable way to get all of this right is to export it, image already hosted.
Get the code
The editor exports signature HTML that survives Outlook and hosts the image, so the parts that usually break are handled.
Export your signature HTMLQuestions about HTML email signature code
How do I get the HTML code for an email signature?
Build it in an editor and export it rather than writing it by hand. Copy the rendered signature, not the raw markup, then paste it into your mail client. The editor also hosts the image, which a copied code sample from an article does not do for you.
Can I write email signature HTML myself?
You can, but email HTML is not web HTML. Mail clients strip style blocks and class selectors, ignore flexbox and grid, and Outlook renders with Microsoft Word’s engine. You end up with nested tables, inline styles, and MSO conditional comments, which is why most people export it instead.
Why does my email signature HTML break in Outlook?
Outlook for Windows uses the Word rendering engine, not a browser engine. It ignores modern CSS, adds its own spacing, and needs MSO conditional comments for reliable layout. Signature HTML has to be built defensively with tables and inline styles to survive it.
Why is the image broken in my HTML signature?
The code references an image that is not publicly hosted. A signature image must live at a stable public URL; a local file path or temporary link works on your machine and breaks for every recipient. Hosting the image is the part code-dump articles leave to you.
Should email signature HTML use tables or div layout?
Tables. Divs with flexbox or grid are standard on the web but unreliable across mail clients, especially Outlook. Signature and email HTML still uses nested tables with inline styles for layout because that is what renders consistently everywhere.
Can I use CSS in an email signature?
Only inline styles, applied directly on each element. Mail clients commonly strip style blocks and external stylesheets, and class-based selectors often do not survive. Anything you want to keep has to be an inline style attribute.
What is the safest font for an HTML email signature?
A web-safe or system font with a fallback stack, for example Helvetica, Arial, sans-serif. Custom web fonts do not load in many mail clients, so the signature falls back anyway. Designing on the fallback from the start avoids surprises.
Do I need a plain-text version of my signature?
Yes, ideally. Some recipients and some clients show the plain-text alternative. A good export includes a sensible plain-text version so your name and contact details are still readable when the HTML is not shown.
How do I copy an email signature without breaking it?
Copy the rendered signature, the visual output, not the code itself. Pasting raw HTML into a mail client shows the tags as text. The rendered copy preserves the layout, the links, and the hosted image.
Is it safe to use an online email signature HTML generator?
It depends on the image. A generator that only gives you code still leaves you to host the image, which is where signatures break. One that hosts the image and exports a tested signature removes the part that actually fails.