How to Create an HTML Email Signature

HTML code

Introduction

Want to know how to create an HTML email signature properly? You’ve come to the right place!

Before we begin, we want to warn you that creating email signatures is a difficult and often tedious task. We always recommend using an email signature generator for the job. However, if you want to create an email signature on your own, keep reading.

You don’t really need to do the tasks in any particular order but we think it’s easiest in the order shown below. Click on the links below in order to go to that part of the guide. We’re adding to the guide regularly. Feel free to drop us a line if you need help with anything in particular, we’d be happy to lend a hand!

This guide details the procedure that should be followed to customize an HTML email signature template. The guide aims to give you enough familiarity with email signature customization to quickly produce your own reliable designs and then quickly adjust it for each staff member in your organisation.

The guide doesn’t cover important design considerations or best practices since we cover those in other articles, and it does not go into the reasons for the addition of the strange extra HTML code since you’ve probably got better things to do! We might cover this in a future article though if there’s interest in the topic.

Is this difficult? Creating professional email signature templates in HTML is fundamentally, much more difficult than it seems. So long as you carefully follow this guide, you'll end up with a properly formatted and reliable email signature that takes up little HDD space.
Required knowledge: None! This guide is aimed at people with no experience in HTML what-so-ever!
Time to complete: Between 1 and 3 hours depending on the level of customization.

Install Some Programs and Set up a Few Things

You’ll need a few programs to be able to edit the signature correctly. Even if you have some alternative programs, for the sake of consistency, I’d recommend that you use the following programs, since they match up with the steps in this guide.

Google Chrome – Formatting varies slightly across browsers for email signatures so we’ll stick with Chrome.

Sublime Text Editor – It makes editing code easy through a variety of shortcuts and formatting.

Be sure to click the “Add to explorer context menu” tick box on installation.

sublime text editor installation check box

Show File Extensions – Most files on a computer have extensions in the file name, but they are turned off in Windows by default. Your computer links the file types to different programs on your computer. For example, opening a file called file.html may open it in Internet Explorer, Chrome, Sublime Text editor or maybe Notepad. We’ll need to be able to see the extension for a variety of reasons. For now, just trust that this is an essential step!

windows file extensions tick box

Download an Email Signature Template

Click the link below, choose and download an email signature template, then just come straight back to this page. You should choose a template for your company based on the layout, not the colors, since colors are easy to customize, but the template structure itself is more difficult.

I’ll be using Consuela Bananahammock’s signature for this guide. In Windows, you should be able to find the file in Windows Explorer (normally in your downloads folder), right click and click “Extract All…”.

Understand the Components in the Template Download File

It’s important to get a broad overview of the files that you will be using. If anything is unclear in this description, come back and review it after you have customized the signature and it should make much more sense. After opening the extracted folder, you’ll see a list of about 10 files. The number of images and exact file names vary depending on which template you downloaded.

The files you will be using:

  • email_example.html – This file is your signature (except images). More precisely, it contains HTML code, which, when read by a browser such as Google Chrome, will create the layout and content of your signature. It also contains CSS code, which controls the styling of the signature. The file itself does not contain the images, and instead contains a web address (URL) for the image. The browser then uses the URL to insert the image into the signature. You will edit this file as needed, to customize the look for your branding.
  • signature-example-minified.html – This file contains the same code as email_example.html, except that the extra spaces and new lines have been removed from the file. You will use a program to generate a new version of this file at the end of the guide, ready for use in email programs.
  • image-1.png (and any other images) – These files are part of the signature and their location is referenced in email_example.html. You will be creating and formatting images to replace these in the customization process.
  • signature-example.psd – This file is only useful if you have Adobe Photoshop, if you do, designing your signature using this template should save lots of time. If you don’t have Adobe Photoshop, don’t worry… Our instructions for editing images are for more generic image editing software.

Other Files:

  • LICENCE.txt – Be sure to read through the licence to check that your use case is inside the scope of the licence.
  • email-signature-example.png – Just a preview of the final product.
  • read-me-header.png & README.html – Don’t worry about these, they are just included for anyone who came across the template without having reference to this guide!

The HTML Layout

This is part 2 of our guide, which outlines a method to create a reliable email signature layout using HTML and CSS. We’re not assuming any prior knowledge here so there’s a fair bit to cover, but trust us when we say this guide is concise! The best way to start writing code is to go slowly and carefully. Mistakes are proportional to assumptions! Click on a link below to look at the other sections of this guide.

You should have downloaded consuela-bananahammock.zip in Part 1. You should be familiar with the usage for all of the files in the zip file and you should have installed Sublime Text editor.

Getting Started

Extract the zip file somewhere on your computer. Windows 10 has an inbuilt zip extraction program, but if you don’t have any way to extract the files for any reason, I like 7-Zip since it’s a small free program with no spyware.

I’ll extract the zip file into a folder called ‘signature’. If your files are extracted into a folder called ‘consuela-bananahammock’, just move them up one directory… We’re coding here, we don’t want to start out with extra pointless directories!

Right click on the file ‘signature-example.html’ and click ‘Open with Sublime Text’. If you don’t see the .html extension, or the option to open in sublime isn’t there, be sure to go back to part 1 of the guide.

email signature in sublime text editor

It may be intimidating, but we’re only going to concentrate on a small part of the code shown in front of you and you should be very comfortable with this code when we’re done.

A Necessary Introduction to HTML

As you can see, sublime text editor conveniently colors the code based on it’s type. We’re interested in some of the pink code with the angle brackets around them. This format signifies a ‘tag’. There are different types of tags, which instruct the browser or email clients such as Microsoft Outlook to do different things.

In the context of email signatures, all tags come in pairs, except for <img>, <!DOCTYPE>, <meta>, <style> and <br> tags. You can think of tags as containers which can hold more tags, images, or text. This means that excluding the tags just mentioned, for every tag you come across, there must be a corresponding closing tag in the email signature. Closing tags can be identified because they have an additional slash (NOT BACKSLASH) after the opening angle bracket. So <td> is an opening tag, </td> is a closing tag. Any code inside these tags can be thought of as inside the container. In the case of table elements, the code is translated into literal two dimensional boxes, so the analogy works quite well.

Tags can also have properties attached to them which alter the behaviour of the tag in some way. For email signatures, we’ll be adding properties to control the signature style and compatibility with the many email clients.

In the context of email signatures (not all html), tag properties are always written after the tag name in the opening tag, always have an attribute name, followed by equals and then by double quotation marks, sometimes with some information between the quotation marks.

Email Signature Layout

HTML Tables – The Basis of an Email Signature Layout

We’re going to be concentrating on the tags that correspond with the layout of the elements for the email signature in this article. The tags we are interested in relate to HTML tables. This is because the text and images used in email signatures are actually placed into invisible tables which instruct the email client on exactly where the text needs to go.

We will need to become familiar with some table characteristics in order to know how to arrange the HTML code for the signature. Some may seem trivial, but if you find yourself looking at your HTML and things aren’t appearing as you expected, just ask yourself whether all of the points outlined below have been adhered to and it should become clear where you went wrong.

  • Tables are always square or rectangular but they cannot be L shaped.
  • Every cell in any particular row has the same height as every other cell in that row.
  • Every cell in any particular column has the same width as every other cell in that column.
  • Cells must be placed directly inside rows.
  • Rows must be placed directly inside the table body.
  • The table body must be placed directly inside the table.

 

The tags we need to look for are as follows:

<table> … </table>  – I think you can guess what this is for!

<tbody> … </tbody> – For email signatures this always sits directly inside the table tags. Easy!
<tr> … </tr> – Stands for Table Row
<td> … </td> – Stands for Table Data. This is the equivalent of a cell and can be used to hold a single image, some text, or even another table.

Planning your Layout

Our task is to learn enough about table related tags to be able to edit the layout of any of the existing example signatures into what ever format you’d like to use. Although this isn’t strictly related to coding the signature, if your signature has more than one column, I’d strongly recommend that you use a photoshop file or just draw out a rough signature design and then split it into the correct assortment of table tags. Here’s my excellent artwork.

My Amazing Plan

planning an email signature

An example of a bad table configuration

We need to write out the correct assortment of table tags based on the rules above. The naive approach is as follows:

planning an email signature table incorrectly

So what’s wrong with it? On first impression you might think it’s over complicated and that you don’t need the table around the valediction, name, or address. The problem with that is that some email clients change the table html slightly when the recipient reads the email, which causes the text to line up incorrectly on the left. So we do infact need to use a table around every element of the signature (or no table at all).

The problem is that if the image is narrower than the valediction, name, or address, there will be some white space to the right of the image. This is because the cells in any particular column must have the same width. You might think to yourself “That’s okay, my image is the wider than the text”, but if the image changes in the future or you decide edit the signature format at all in the future, you’re going to have to change a fair bit of code just to remove the extra white space that had been added.

An example of good table configuration

planning an email signature table correctly

This table configuration allows you to quickly change the arrangement in the future if required and allows you to change the widths of the images and text.

It’s possible that your signature design won’t fit into any arrangement of table elements, which is where nested tables come into the equation. A table can be inserted between the <td> and </td> elements to nest one table into the other.

Important Note About Tables

We’re talking about HTML tables here, so if the recipient of your email has their email client set to ‘plain text’ or ‘rich text’ instead of html, these tables are stripped out of the email. You need to know what happens in this situation to be sure that your email signature will make sense and won’t be displayed in the wrong order.

All <td> elements in any one <tr> are displayed on new lines. The most common mistake here is if you use a table to separate the contact information tags from the contact information. For example, your email and phone may be displayed using two <tr>’s with two <td>’s in each so that the email address and mobile number line up vertically with each other.

The code would be as follows:

<tr>

    <td>Email | </td>

    <td>support@example.com</td>

</tr>

<tr>

    <td>Mobile | </td>

    <td>0123 456 789</td>

</tr>

Email recipeients using plain text will see the following:

Email

support@example.com

Mobile

0123 456 789

Not very pretty, is it?

Now you know the basics of Tables for Email Signatures

If you double click on ‘signature-example.html’ to view the signature, (or drag the icon into the browser window). Then you should be able to look through the HTML and understand what the table elements actually do! We’re now ready to start editing signature-example.html in order to change the layout.

I’ll outline a few tasks and go through the quickest way to make changes which should set you up to rearrange the various components of an email signature while keeping the important aspects of coding in mind so that you don’t end up with a mess after 3 edits! Sublime has some amazing keyboard shortcuts! Let me know in the comments if you’d like me to go through anything else.

Example: Moving the Address to Directly Below the Name

We know that we’re looking for a <tr> because we’re changing an entire row of elements here. We also know that the text we’re looking for is “Address. Level 1, 23 Fourty-Five Street, Example Town, 1234, The World”. However we don’t know that there isn’t some hidden code in this text, so we should try to search for some code which is more likely to be held in the same piece of code.

So hold down ctrl + f to search for ‘Fourty-Five Street’ and click enter. You should now see that the <tr> that holds the address is on line 92. Hold down ctrl + g to go to a line, then type ’92’ without the quotation marks and hit enter.

Hold shift and hit the down arrow on your keyboard until line 92 – 101 inclusive are highlighted, then hold down ctrl + x to cut. It’s a good habit to get into to check that the first and last part of text being highlighted are the same opening and closing tags. If you make a mistake, it can be difficult to find out where you’ve got a stray open tag that hasn’t been closed.

We now need to find out exactly where to paste the snippet of code. We know that <tr>’s can only go inside <tbody>’s and can go next to other <tr>’s. Using the same method as before to search for the text we need, you should find that the signature name is on line 40 and the closest containing <tr> is on line 37.

Since we want to place the address just after the name, we want to place the cursor at the start of the line directly after the closing tag corresponding to the name, which you should see is on line 50.

So hold down ctrl + g and type 50, then ctrl + v to paste the cut code into its new location. Done!

Most of the time, the indentation will be incorrect when you move signature parts around. It’s very important that you fix the indentation or you will inevitably forget to close open tags. So to fix indentation, just highlight the text that you want to change, hold ctrl + [ or ]. It’s really useful!

How to Customize Your Email Signature Text and Font

So you’ve downloaded an HTML email signature template, and now you just need to customize your email signature to include your details and maybe your company style. We’re using our Consuela Bananahammock template but you can use any other template you find. I’d say you can use templates from anywhere, but I honestly haven’t found any free email signature templates on the internet which correctly address the many compatibility issues that you have to code around. So just have a look through ours to be safe! In saying that, please let everyone know if you find some good free templates in the comments section.

My aim for this part of the guide is to teach all of the “gotcha’s”, time-saving tricks, and general HTML and CSS knowledge needed to allow someone with no existing HTML knowledge to change the text, font, and font style in an email signature template so that it lines up with an existing company style.

Getting Started

If you don’t have sublime text editor installed and one of our templates downloaded, read through part 1 of this guide entirely. You’ll then need to know some HTML and editing basics.

Okay lets get to it… As per part 2, extract the email signature template into a new folder called “signature”. Now, open the folder and find the file called “signature-example.html”. The best way for you to make changes to your email signature (or code in general) is to make small changes and view the results quickly and repeat this process. This is especially important when you don’t have much HTML experience.

Open the email signature in Google Chrome (don’t use Internet Explorer or Edge). When it’s open, you should be able to see a complete signature including images. If you don’t see the images, it means they aren’t in the same folder as the HTML file.

While Chrome is open, right-click the same HTML file and choose “Open with Sublime Text” and then position each window next to each other so that you can see both as per the screenshot below.

Customize Your Email Signature

Changing the Text

We’ll start with the basics. You want to change the signature so that your company details are in there instead of the example data. Since there’s a lot of code, the easiest way to get to the part you want to edit is using the search function in Sublime Text Editor. Press Ctrl + f to search the file. It’s best to search for single words since sometimes there may be code between one word and another. So search for “Consuela”. Keep these tips in mind:

  • Be sure not to remove the surrounding tags by accident. This is especially important because if you accidentally remove an entire tag, the browser may still display the signature correctly, but when you go to install the signature, it won’t show up correctly.
  • If you want to write the text on multiple lines, follow the instructions in the “Making New Lines” section of this guide. Don’t expect it to work by pressing enter or adding a <br> tag. (Don’t worry if you don’t know what I’m talking about just read the section below.)

Multi-line Text

Pressing enter doesn’t work when coding email signatures in HTML. The normal way to add a new line in HTML code is to use a <br> tag but if you’re using tables in your email signature, this isn’t the best way either since different email software adds different spacing between the lines which leads to an inconsistent look. The best way to add text that spans multiple lines is to add a new table row.

Luckily we’ve already covered how to move a row in part 2 of this guide in the “moving the address“ section. So just follow those instructions, except instead of cutting the address field, copy it and paste it directly below where it came from! Take extra care not to insert the code snippet in the wrong tags. Remember that they should be pasted directly below the previous closing </tr> tag.

Deleting Text

If you want to delete a whole line of text, don’t just delete the text itself leaving the surrounding code. Be sure to remove the <tr> tags and everything between them. Now that I think about it, just use the “moving the address” section of part 2 once again! Now the only difference is that you just leave out the pasting part!

Changing Font

You thought maybe this one would be easy? Nope! You’ll come across a few compatibility problems if you just have a shot until you seem to have found a solution. Can you guess what the problem might be?

One problem is that when you view the signature in the browser it displays fonts that are stored on your computer. An Apple computer has different fonts to a Windows computer, which are different to an Android phone, which are again different to the fonts on iOS. Even if you think that you will only be sending signatures to Windows users, the fonts installed on a Windows computer change when you install Microsoft Office!

Another problem is that since different email programs may alter different parts of the HTML before rendering the final signature (especially web-based email programs like Gmail), you have to specify the correct font to use in multiple places.

Now to the Coding…

In your text editor, you’ll notice that the font is specified in the following way.

<span style=”font-family: Calibri, Helvetica, sans-serif; font-size: 17.0px; font-style: normal; line-height: 19px; font-weight: bold; color: #008bb8; display: inline;”>
<font face=”Calibri, Helvetica, sans-serif“>Consuela</font>
</span>

The top line specifies the font as an inline style, the second line specifies the font using the ‘face’ tag attribute. For compatibility you’ll need to specify the font in both places.

The second thing you should notice is that there are multiple fonts specified on each line. The way this works is that the email program or browser will check to see if the first font is installed (Calibri), if not, it will try the next font (Helvetica) and so on.

List of Usable Fonts

  • Arial, Helvetica, sans-serif
  • Arial Black, Gadget, sans-serif
  • Calibri, Helvetica, sans-serif
  • Comic Sans MS, cursive
  • ‘Courier New’, Courier, monospace
  • Gadget, Arial Black, sans-serif
  • Georgia, serif
  • Helvetica, Arial, sans-serif
  • monospace, Courier New
  • ‘Lucida Sans Typewriter’, ‘Lucida Console’, monospace
  • Palatino, ‘Palatino Linotype’, serif
  • Tahoma, Geneva, sans-serif
  • ‘Times New Roman’, Times, serif
  • ‘Trebuchet MS’, Helvetica, sans-serif
  • Verdana, Geneva, sans-serif

 

You’ll notice that some of the fonts use single quotation marks which you will need to copy as well as the font. They aren’t required for all fonts though.

You should only use one, or at most two fonts in your email signature, and this is the case in our example. So in order to quickly change all of the fonts at once, we can use find and replace in our text editor!

So first, copy one of the fonts from the list above. Then in Sublime Text Editor, press Ctrl + h to bring up the find and replace bar. Now paste the new font into the “replace With” field.

Now, I was going to make a change on this website in order to prevent some confusion, but since you’re likely to come across this problem on other websites, and not understand how to fix it, we’ll fix the problem in our text editor instead.

The problem is that this website is coded in WordPress which changes apostrophes into sneaky impostrophes! Have a look at the difference in the image below.

Don’t get Caught by Impostrophes!

apostrophes vs impostrophes

The easy fix is to highlight the apostrophes in the ‘find what’ field, and replace them with regular apostrophes. Both should look the same as each other.

Now, in the text body of the signature, highlight the existing font and be sure to exclude the trailing semi-colon. Now copy and paste it into the “find what” field.

In general its best to click “replace” rather than “replace all” since its easy to screw up a file with find and replace. For example, if the replacement text exactly includes the text from “find what”, you could keep replacing text forever!

In this case, since the two pieces of text (called strings), are going to be replaced in every instance and since the strings are fairly long, we should be safe clicking “Replace All”.

The font should now be updated… Go to the browser and refresh the screen to see the new font.

two email signatures comparing font difference