Skip to main content
SignMyMail

HTML email signature: what it is and how to use one

An HTML email signature is a small block of HTML that your mail client appends to every message. Done right, it renders the same in Gmail, Outlook, and Apple Mail. Done wrong, it turns into a pile of broken images and mismatched fonts. This page explains what is inside the code and how to use the generator's HTML output.

Create your signature

Why signatures use tables, not divs

Email clients do not agree on CSS. Outlook for Windows renders with Microsoft Word, which ignores flexbox, grid, margins on some elements, and background images. Gmail strips <style> blocks and classes. The one layout tool every client supports is the humble <table>, with every style written inline on the element.

That is exactly what the generator produces: nested tables with role=“presentation”, inline styles on each cell, web-safe fonts, and explicit widths for images. It is not pretty to read, but it survives.

What is in the code

A signature contains a wrapper table, a row for the photo and text, cells for name, title, company and contact lines, image tags pointing at a hosted photo or social icons, and anchor tags for links. Everything you see in the preview maps one-to-one onto this structure.

Images must be hosted at a public URL or embedded as base64 data. Gmail only supports hosted images; Outlook and Apple Mail support both.

Using the HTML code

  1. 1

    Generate the signature

    Fill in the generator on the home page and choose a template. The preview is rendered from the exact HTML you will get.

  2. 2

    Copy the code or the formatted signature

    Most people should use Copy signature, which pastes rich text. Use Copy HTML or Download .html when a client or tool asks for raw code, for example CRM email tools, help-desk software, or a company signature manager.

  3. 3

    Paste into a code field

    Tools like HubSpot, Zendesk, Front, or Mailchimp usually have an HTML signature box. Paste the code there. Do not paste raw code into Gmail's visual editor; it will show the tags as text.

  4. 4

    Check the rendering

    Send yourself a test message and open it in the clients your recipients use. The deliverability check on the generator flags size and image problems before you do.

Tips

  • Keep the total under 10 KB for Gmail. A hosted photo instead of an embedded one is the biggest saving.
  • Never edit the code in a word processor; it will add its own markup. Use a plain text editor if you must change something.
  • Avoid custom web fonts. They rarely load in email and cause fallback jumps in the layout.
  • Alt text on images is set from your name and company automatically, so recipients who block images still see who you are.

Common questions

Create your signature