Naimh is a seasoned marketer of 12 years, including in SaaS and tech. She’s an expert at simplifying complex technology concepts, bridging the gap between IT and marketing. Naimh specializes in turning tech speak into actionable insights, helping marketers get the most out of their tools and technology.
How to create an HTML email signature
TL;DR
An HTML email signature is a block of HTML code, not plain text or a single image, so it can hold a logo, clickable links, and formatting that a plain-text email signature can't.
Build one with an HTML table for the layout, not CSS positioning, since most email clients strip the CSS that makes web pages responsive.
Host images on a URL rather than embedding them if many recipients read on mobile or Microsoft 365, since embedded images can arrive as attachments and inflate the email.
Test the finished code in Outlook and Gmail before you deploy it. The same HTML can render two different ways, and that gap only gets more expensive once more than one person's email signature depends on it.
What is an HTML email signature?
An HTML email signature is a snippet of HTML code placed at the end of an outgoing email. The email client reads that code and renders it as a formatted block: a name, a job title, a logo, links, and sometimes a banner or a disclaimer, laid out the way the code specifies rather than however plain text happens to wrap.
The difference from a plain-text email signature is structural. Plain text can only hold characters. HTML can position a logo next to a name, turn a phone number into a tappable link, and apply a specific typeface and color, because it's built from the same markup language that renders web pages. An email client without an HTML email signature just prints your name, title, and contact details as unformatted lines.
Why HTML instead of plain text or an image only?
Plain text signatures can be set up in seconds and look identical everywhere, but that's all they can do. There's no logo, no color, no clickable link. It reads like an email signature typed in a hurry.
Using an image only means you'll have a designed email signature until the images get blocked. Some recipients will see a broken box or a red X, and a screen reader will have nothing meaningful to show unless alt text has been added to the file. An image-only block also usually turns into a single clickable area. This means a reader won't be able to tap the phone number separately from the email address.
HTML avoids both these issues. The contact details become real, selectable text, so nothing breaks if images are off. Logos, banners, and multiple separate links all work independently. The cost is that someone has to build it correctly, which is the rest of this guide, and build it correctly again every time it needs to change.
Plain text | Image only | HTML | |
Setup time | Fastest | Fast | Slowest |
Clickable links | One at most | Often one, if any | Several, independently |
Survives images blocked | Yes | No | Yes |
Logo, color, layout | No | Yes | Yes |
Screen reader accessible | Yes | Only with alt text | Yes |
How do HTML tags work for email signatures?
HTML structures content with tags, most of them in opening and closing pairs. A full page uses <html>, <head>, and <body> to wrap everything, but an email signature is a snippet pasted into an existing email, not a standalone page, so what actually ends up in the email signature box is usually just the inner markup: a table and the tags inside it. The ones that matter most in an email signature layout:
Tag | What it does in an email signature |
<table>, <tr>, <td> | Builds the grid that holds each element in place, since most email clients strip CSS layout |
<header> | A section that can introduce your name, title, or logo |
<img> | Embeds a logo or photo as a PNG, JPEG, or GIF, either as attached data or a link to a hosted file. SVG doesn't render reliably in email signatures, and Microsoft removed inline SVG support from Outlook on the web and the new Outlook for Windows in late 2025 |
<a> | Turns text or an image into a clickable link |
<footer> | Often used for disclaimers, legal notices, or additional contact details |
<td style="..."> | Carries inline formatting: font, color, padding, since external stylesheets don't survive the trip through most inboxes |
That last row is the one that trips people up coming from web design. An email signature's styling has to live inline, attached directly to the tag it affects. That's because a separate <style> block gets stripped by Outlook, Gmail, and most other clients before the message ever reaches the reader.
Why use HTML code in email signatures?
Using HTML code to create email signatures offers many benefits. This makes it a preferred choice for professionals and businesses aiming for polished, consistent communication.
Here are the key advantages:
1. Consistency across devices and platforms
HTML-coded email signatures maintain their formatting and appearance across different email clients and devices. Unlike manually created signatures that may face compatibility issues, HTML ensures your brand image and professionalism remain intact.
2. Enhanced professionalism and branding opportunities
An HTML signature gives your emails a polished image, reflecting professionalism with every interaction. It also offers branding opportunities by incorporating design elements like logos, color schemes, and fonts. This helps reinforce your or your company’s identity and leaves a lasting impression.
3. Advanced design, customization, and creativity
HTML gives you complete control over the layout and design of your email signature. This allows for more creative and personalized presentations compared to plain text. You’re not limited to basic formatting and can include visually appealing elements.
4. Interactive and clickable features
HTML signatures allow you to add clickable links to your website, social media profiles, or other online resources. This makes it easy for recipients to connect with you or learn more about your business. You can even include links to call directly on mobile devices or navigate to specific landing pages.
5. Marketing and promotional channel
An HTML signature can double as a subtle marketing channel. You can include promotional banners, taglines, certifications, or announcements about awards, events, or recent achievements. This helps promote your business with every email you send.
6. Inclusion of rich media
With HTML, you can embed rich media, such as images like a personal photo or company logo. These make your signature more visually engaging and memorable. This elevates your signature’s look and reinforces your brand identity.
7. Ease of updates and maintenance
Updating an HTML-coded signature is quick and efficient. You can edit the code once and deploy the updated version across all platforms. This means everyone in your organization uses the latest signature.
8. Compatibility across email clients
Well-coded HTML signatures are usually compatible with most email platforms. This keeps your signature consistent and uniform regardless of the recipient’s email client.
How to build an HTML email signature
1. Prepare the design
Decide on the layout, the logo, and the contact details before writing any code. A design made in an image editor first is easier to translate into a table structure than one improvised directly in HTML.
"Some tools sadly can't adapt per screen the way websites can. We can't use responsive HTML, because the majority of mail clients can't accept it. So think about how you adapt instead: you could stack your information, or stick to constraints like 450 pixels for mobile and 600 pixels for the widest piece of information you have."
600 pixels is the conventional safe width in email design generally, not a number specific to this guide. A fixed-width table wider than the screen it's opened on doesn't reflow the way a responsive web page would. It either overflows and forces horizontal scrolling, or gets awkwardly shrunk by the client, depending on the device.
Exclaimer's guide to email signature sizing covers banner and logo dimensions in more depth if your design goes beyond a simple layout.
2. Code the layout
Build the structure with an HTML table, not <div> positioning or CSS flexbox. Those depend on stylesheet support that most email clients don't give them.
A typical email signature is one or two rows and two or three columns, logo in one cell, contact details and links in the others, with inline style attributes on each cell rather than a separate stylesheet.
3. Test it before anyone sees it
Send the finished email signature to yourself in at least Outlook and Gmail, since a table that lines up correctly in one can shift in the other.
Check it on a phone too. This step is the one most people skip when they're in a hurry, but it's the one that catches the alignment break before a client sees it instead of after.
4. Deploy your HTML signature
Paste the finished HTML into your email client's email signature settings (the exact steps differ by client and are covered further down this page). Keep a copy of the working code somewhere outside your email client. The next update, or the next new hire, starts from that file rather than from scratch.
Don't want to hand-code this?
Exclaimer's email signature generator builds the HTML in your browser instead: pick a layout, add your logo and details, and copy the working code. Free for a single signature; no coding required.
Should you use embedded or hosted images?
An image in an HTML email signature gets included in one of two ways. Embedding the image packs the data directly into the email, so it displays with no external request and no dependency on a server staying online later. The alternative is hosting it, which means the email signature carries a link to an image sitting on a web server. The recipient's email client then fetches that image the moment the message opens.
The trade-off comes down to where your recipients read their email. Embedding keeps the image working offline and skips the load request. However, it adds roughly a third to the email's size, and Microsoft 365, Exchange, and Outlook.com commonly display embedded images as attachments rather than inline.
Hosting images keeps the email lighter and avoids that attachment problem, but at the image depends on the hosting server staying up and reachable. Also, with hosted images, most email clients block remote content from loading automatically by default, regardless of the image's size. That means the recipient often has to approve loading images
Tip
Keep each image under 50 KB regardless of which method you choose. A heavier file slows the message down.
Why doesn't my email signature look the same everywhere it's sent?
The short answer is that the code doesn't run inside a browser. A web page renders once, in one engine, that the designer can test directly. An email signature has to survive whatever rendering engine each recipient's client uses, and Outlook, Gmail, and Apple Mail each interpret the same HTML slightly differently.
Replying to or forwarding a message makes it worse. The receiving client has to switch from displaying your message to letting the recipient edit a new one. That causes the email signature's HTML to be reparsed and rebuilt by its own rules instead of preserving it byte for byte. And an email signature sits right beside plain body text, so a padding error or an unaligned image is more visible there than almost anywhere else on the page.
Rows, columns, and consistent padding keep a logo, a name, and a job title lined up in a way that separately positioned elements can't guarantee. This is why tables handle the alignment side of this reliably. The rendering-engine differences are a separate problem that no layout choice fixes on its own. Testing your HTML signature in the actual email clients that your recipients use is the only way to catch it.
How do I add an HTML email signature in Outlook or Gmail?
Outlook (desktop, Windows and Mac): In classic Outlook, File > Options > Mail > Signatures (Windows) or Outlook > Settings > Signatures (Mac); in the newer Outlook for Windows, it's Settings > Accounts > Signatures instead. Either way: New, then paste the code into the email signature editor and save.
Outlook on the web and Microsoft 365: Settings > View all Outlook settings > Mail > Compose and reply > New signature, paste the code, and save.
Gmail: Settings (the gear icon) > See all settings > scroll to Signature > Create new > Insert HTML (or paste directly into the editor, depending on the current Gmail version) > save changes.
Can you use HTML email signatures in Google Workspace?
HTML email signatures are compatible with Google Workspace. But even though you can create HTML email signatures using the Google Admin console, there are limitations:
You can only use up to 10,000 characters in the HTML code.
There’s no way to auto-populate contact information from Google Directory.
You can’t test the signature before it goes live, so there’s no way to know how it will display in real time.
You can’t place a signature under every reply, causing the signature to stack at the bottom of the email chain.
Exclaimer's guide to Google Workspace email signatures covers the admin console setup in more detail.
Can you use an HTML signature for Microsoft 365?
Yes, but you may experience some compatibility issues if you’re using signatures in Microsoft 365:
Signatures will stack at the bottom of email conversations.
HTML code can be stripped out of emails sent to mobile devices.
If the images are embedded rather than hosted, they'll appear as attachments, increasing the size of the email.
As with Google Workspace, there’s no way to test your signature before launching it.
Exclaimer's guide to Microsoft 365 email signatures provides more insight into these issues.
What happens once it's not just your email signature anymore?
Hand-coding an HTML email signature is a one-person task right up until a second person needs the same one. Keep adding people, and the informal fix (a shared file, a copy-paste convention, and a reminder in the onboarding checklist) eventually turns into exactly the kind of project this guide has been walking through.
Exclaimer's 2025 Build vs Buy research, drawn from more than 2,000 IT and security decision-makers, found that 13% of teams had gone all the way to the far end of that spectrum and built their own email signature management tool rather than buy one.
Paul Hammond, Exclaimer's Chief Product and Technology Officer, points to email signatures as one of the systems organizations most often try to build themselves, only for teams to end up, in his words, "staring at low-quality or hard-to-understand code and a tangle of fragile integrations." The same research found these builds fail more often than they succeed: 71% are eventually scrapped.
Hand-coded HTML is a one-time build for one person and an open-ended maintenance job for everyone else. A rebrand means re-editing and re-testing every version already in circulation. A disclaimer update means finding every copy that needs the new wording. And these assume someone kept track of where they all are in the first place. Both jobs get bigger with every person added to the list, not smaller.
Managing HTML email signatures with third-party solutions
Everything in this guide points to how time-consuming designing and creating HTML email signatures can really be. Specialist email signature solutions, however, make creating them simple.
Exclaimer's email signature management applies Signature Rules centrally instead of asking each person to keep their own copy of the code current. That means a rebrand or a new disclaimer updates every mailbox at once rather than waiting on whoever still has the file.
If hand-coded HTML has already started slipping through the cracks, Exclaimer's worth a look.
Learn more and get yourself an interactive product tour today.
