Email Signature HTML: How to Write It From Scratch
Write a clean HTML signature from scratch using simple markup, inline styles, hosted images, and email-client-safe layout decisions.
Quick Fix
- Start with content fields before writing markup.
- Use a small table only if you need logo/text alignment.
- Style every important element inline.
- Use hosted HTTPS images with width, height, and alt text.
- Test the rendered signature after pasting it into the email client.
Plan the Signature Before Writing Code
Writing an email signature from scratch is easier when you decide the content first. The markup should support the information, not the other way around. List the required fields, choose one primary action, decide whether a logo or photo is truly needed, and keep the layout narrow enough for mobile screens.
A strong first version might include name, role, company, phone, website, and one professional profile. Add compliance text only if it is required. Add images only when they are prepared and hosted correctly. This planning step keeps the HTML small and prevents design decisions from becoming code problems later.
Use an Email-Safe Structure
Email clients do not behave like modern browsers. They may remove style blocks, ignore advanced layout CSS, and rewrite parts of the markup. That is why signature HTML should use conservative structure. A simple table can align a logo beside text, but many signatures work well as a vertical block with no table at all.
Use inline CSS for font family, font size, color, line height, padding, and link color. Avoid CSS grid, flexbox-dependent layouts, background images, scripts, forms, and external stylesheets. Use system fonts such as Arial, Helvetica, Georgia, or another common fallback.
Recommended Markup Pattern
| Part | Purpose | Implementation Tip |
|---|---|---|
| Outer wrapper | Controls width and base typography. | Use inline font and line-height styles. |
| Identity block | Shows name, title, and company. | Keep name strongest and role secondary. |
| Contact lines | Gives phone, website, and optional address. | Use readable text and descriptive links. |
| Image | Adds logo or photo. | Use width, height, alt, border 0, and hosted HTTPS URL. |
| Disclaimer | Adds required legal or policy text. | Use smaller muted text below the signature. |
Writing Workflow
- Create the signature as plain content first.
- Choose a maximum width between 320px and 600px.
- Write a simple wrapper with inline font and color styles.
- Add name, role, company, and contact lines.
- Add links with descriptive text and HTTPS URLs.
- Add images only after they are compressed and hosted.
- Render the signature in a browser and copy the rendered version into your email client.
- Send tests and simplify anything that breaks.
Image and Link Rules
- Use absolute HTTPS image URLs, not relative paths.
- Do not rely on images for essential contact information.
- Add alt text for logos and photos.
- Set practical image dimensions so clients do not guess.
- Make links descriptive and avoid making the whole signature clickable.
- Check that phone and booking links work on mobile.
Common Code Mistakes
The most common mistake is copying HTML from a website component. Website HTML often depends on classes, external CSS, JavaScript, SVGs, and layout systems that email clients do not support. A signature should be purpose-built for email rather than extracted from a web page.
Another common mistake is using too much code to solve a content problem. If spacing is hard to control, the layout may be too complex. If a table needs several nested tables, the design may need to be simpler. The more conservative the signature, the more likely it is to work everywhere.
Frequently Asked Questions
Can I use CSS classes in an HTML email signature?
You can, but inline CSS is more reliable because many email clients strip style blocks or change class handling.
Should I use tables or divs?
Use the simplest structure that works. Tables are useful for alignment in email, but a vertical text block may not need a table.
Can I use SVG icons?
SVG support is inconsistent in email clients. PNG icons are usually safer for signatures.
How do I paste raw HTML into an email client?
Many clients require copying the rendered signature rather than raw HTML. Render it in a browser, select the visible signature, copy it, and paste it into the signature editor.
Last updated: