
Do you want to create a professional HTML email signature that is compatible with Outlook, Apple Mail, Gmail, and many other email applications? You’ve come to the right place! In this guide, you’ll learn how to create a beautiful email signature that looks great and is super functional.
Before we begin, you should know that manually creating an email signature can sometimes be a time-consuming and tedious task. We always recommend using an email signature generator as that is the quickest and easiest way to end up with an amazing email signature. However, if you want to create an email signature on your own, keep reading!
1. Download an Email Signature Template
The best way to create an HTML email signature is to start with a template and then modify it to suit your needs.
We have a huge list of free email signature templates that you can download and use for this exact reason.
Selecting the Right Email Signature Template
When browsing through our templates, it’s important to consider a few things:
- Look at the layout of the template – It’s relatively easy to change things like images, colors, fonts, etc. However, it’s often more difficult to change the positioning of elements. When selecting a suitable email signature template, you should always check whether the layout looks (roughly) correct. This means checking the position of the images, social icons, text, spacing, and borders.
- Horizontal or vertical layout – Having a mobile-compatible email signature is critical in this day and age. Vertical layouts work better for mobile devices. However, if you don’t have too much information in your email signature and can keep it narrower than around 400 pixels, you might be able to get away with using a horizontal layout.
- Overall layout size – Even though editing things that contribute to the overall size of the layout is relatively easy, it’s just easier if you use a template that already has the correct font, font size, border widths, spacing, etc. The closer the chosen template is to your final email signature, the less you will have to edit.
Components of the Downloaded Template File
Here are the components of the downloaded email signature template ZIP file:
- template.html – This is the main file we will be using to create your HTML email signature in this guide. It contains the minified HTML code required for your email signature to display correctly.
- instructions.txt – This is a text file that has some information about the downloaded template inside it.
2. Install Some Programs and Set up a Few Things
You’ll need a couple of applications to be able to create your email signature correctly. Even if you have some alternative applications, for the sake of consistency, we recommend that you use the following applications, 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.
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 applications 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 file extension for a variety of reasons.
Simply open File Explorer > View > Tick “File name extensions”

3. A Necessary Introduction to HTML
The goal of this section is to get you familiar with HTML, CSS, all the different terminology, and also HTML tables. With this knowledge, you’ll be able to create an email signature in just a few minutes!
We’re not assuming any prior knowledge here so there’s a fair bit to cover, but this guide is fairly concise! The best way to start writing/editing HTML code is to go slowly and carefully. Mistakes are proportional to assumptions!
Feel free to look over this HTML Reference if you aren’t sure about how a specific tag works or what it does.
Terminology
- Tag – the component name that is inside the angle brackets (<>). For example, this is the table tag: <table>
- Element – the content within the opening and closing tags, including the tags themselves. For example, <span>This is some text</span>
- Attribute – the attribute is inside the tag brackets (<>). For example, this is the border attribute inside the table element: <table border=”0″>
- Attribute Value – the value assigned to the attribute. For example, the border attribute value in this case is set to zero: <table border=”0″>
- Parent Element– the outer element which contains the current element.
- Child Element – the inner element which is a direct descendant of the current element.
- Sibling Elements– any elements that have the same parent element as the current element.
- CSS Property – the first part (before the colon) of the attribute value inside the style attribute. For example, the property in this case is padding-bottom: <td style=”padding-bottom: 4px;”>
- CSS Property Value – the second part (after the colon) of the attribute value inside the style attribute. For example, the property value in this case is 4px: <td style=”padding-bottom: 4px;”>

HTML Structure – A Tree-Like Composition
In the context of HTML email signatures, all tags come in pairs, except for <img>, <!DOCTYPE>, <meta>, <style> and <br> tags. You can think of tags as containers that can hold more tags inside them. 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 forward slash (not backslash!) after the opening angle bracket. So <td> is an opening tag, and </td> is the 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 attributes attached to them that alter the behavior of the tag in some way. When making your HTML email signature, we’ll be adding attributes to control the signature style and compatibility with the many email clients.
In the context of email signatures (not all HTML), tag attributes 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, with some information between the quotation marks.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <span style="font-family:Verdana, Geneva, sans-serif;font-size:12.0px;"> This is a sentence which will be shown using the Verdana size 12 font. </span> </body> </html>
In the above example code, you can see the tree-like structure of HTML, where tags are nested inside other tags. You will also notice that some tags have attributes and values, while others don’t.
HTML Tables – The Basis of an Email Signature Layout
Firstly, it’s important to understand that around 95% of the HTML code in an email signature is related to tables. So, when you create an HTML email signature, you’re mostly going to be dealing with <table>, <tbody>, <tr>, and <td> elements. These are the “core scaffolding” elements required to make a fully functioning email signature.
A brief explanation about HTML table related elements:
- <table> … </table> – This is the table.
- <tbody> … </tbody> – This is the table body and always sits directly inside the table element. Easy!
- <tr> … </tr> – Stands for Table Row.
- <td> … </td> – Stands for Table Data. This is the equivalent of a column and can be used to hold a single image, some text, or even another table – yes, tables can be nested.

You will need to become familiar with some table characteristics in order to know how to arrange the HTML code for your new email 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.
Some guidelines related to HTML table structure:
- Tables are always square or rectangular but they cannot be L shaped.
- Every column inside any particular row has the same height as every other column inside that row.
- Every column inside any particular column has the same width as every other column inside that column.
- Columns 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.
<table> <tbody> <tr> <td style="border-collapse: collapse;padding-bottom: 4px;"> <span style="font-family:Verdana, Geneva, sans-serif;font-size:16.0px;font-style:normal;line-height:18px;font-weight:700;color:#444444;display:inline;"> MEGHAN DUNLOP </span> </td> </tr> <tr> <td style="border-collapse: collapse;padding-bottom: 4px;"> <span style="font-family:Verdana, Geneva, sans-serif;font-size:12.0px;font-style:normal;line-height:14px;font-weight:400;color:#444444;display:inline;"> Project Manager </span> </td> </tr> <tr> <td style="border-collapse: collapse;padding-bottom: 14px;"> <span style="font-family:Verdana, Geneva, sans-serif;font-size:12.0px;font-style:normal;line-height:14px;font-weight:700;color:#c65e5e;display:inline;"> Flame Tree Creative </span> </td> </tr> </tbody> </table>
In the above example code, there is a table element, with 3 rows, and each row has a column inside it, and each column has a span inside it. Some of the tags have style elements that determine the styling of the data inside them.
CSS – Styling of Email Signatures
CSS stands for Cascading Style Sheets, and although HTML email signatures don’t use CSS in the traditional sense where styles are defined with classes, they still use CSS properties. If you aren’t sure how a specific CSS property works or what it does, take a look at this CSS Reference.
Since most email clients don’t support the use of <style> tags, this makes it impossible to define and use stylesheets within HTML email signatures. This also means that you cannot use CSS media queries to define styles for various devices and viewport sizes. For example, a simple CSS media query could make all the fonts bigger/smaller when the email signature is viewed on mobile devices. This would be handy to have in the modern world. This leaves only one option when it comes to email signatures and CSS, which is to define styles inline for each relevant element.

CSS styles flow down the HTML tree, which means if you define a style on a <td> element, it will be applied to the child <span> element unless that <span> element has the same CSS property defined on itself, in which case it will use the CSS property value of the <span> element, rather than its parent <td> element.
CSS properties are separated with semi-colons (;). This means you can have multiple CSS properties in the one style attribute as long as you separate them with a semi-colon.
<table style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;"> <tbody> <tr> <td style="border-collapse: collapse; font-family: Verdana, Geneva, sans-serif; font-size: 16px; font-style: normal; line-height: 18px; font-weight: 700; padding-bottom: 4px;"> <span style="font-family:Verdana, Geneva, sans-serif;font-size:16.0px;font-style:normal;line-height:18px;font-weight:700;color:#444444;display:inline;"> MEGHAN DUNLOP </span> </td> </tr> <tr> <td style="border-collapse: collapse; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-style: normal; line-height: 14px; font-weight: 400; padding-bottom: 4px;"> <span style="font-family:Verdana, Geneva, sans-serif;font-size:12.0px;font-style:normal;line-height:14px;font-weight:400;color:#444444;display:inline;"> Project Manager </span> </td> </tr> <tr> <td style="border-collapse: collapse; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-style: normal; line-height: 14px; font-weight: 700; padding-bottom: 14px;"> <span style="font-family:Verdana, Geneva, sans-serif;font-size:12.0px;font-style:normal;line-height:14px;font-weight:700;color:#c65e5e;display:inline;"> Flame Tree Creative </span> </td> </tr> </tbody> </table>
In the above example code, you will notice that some CSS properties (and their values) are repeated in child elements even though the parent has that same property and value defined. You might think that this is over-specified and inefficient, but this is actually done for email application compatibility reasons. That way, your email signature looks good no matter what email application it is viewed on.
4. Tips for Working With HTML Files
To create an email signature, you will need to be comfortable editing HTML, which can be very frustrating at times.
Here are some helpful tips which will make the journey much more bearable.
Keep Both Chrome and Sublime Windows Open
When modifying your signature HTML file, having the ability to quickly see the changes to your email signature is paramount. You can achieve this by having both Sublime and Chrome open at the same time.
Simply position each window next to the other so that you can see both as per the screenshot below. This makes editing HTML code much easier.

Use Chrome’s Inspect Feature
Chrome has a very helpful feature called Inspect. It shows you all the elements of the HTML document (in this case, the email signature) that are rendered. It also shows you which CSS properties are applied to each element.
You can use the Inspect feature to modify and test things directly in Chrome (such as colors, fonts, and even the HTML itself) before making changes to the HTML file.

Important: Any changes you make in Chrome are not saved to the HTML file and will revert back once you refresh the page. Hence, it’s important to remember or write down what changes you’ve tested in Chrome that you want to implement in your HTML file.
To use the Inspect feature, right-click on any part of the email signature (eg. name, job title, an image), and click on Inspect.
This will open the Inspect window where you can click (or hover) on specific elements to see how they interact with everything else.
It’s important to get comfortable using Chrome’s Inspect feature when you create an email signature.

Changing CSS Properties in Chrome
To add/change the CSS properties of any element:
- Right-click on a specific element where you wish to change the CSS properties, and select Inspect.
- Under the Styles section, you will see all the different CSS properties applied to that element, such as “font-size: 12px;” or similar.
- You can either add additional CSS properties (which may override existing ones) by putting them into the element.style part, or you can modify an existing CSS property by just clicking on its value and changing it. To finish editing simply press Enter on your keyboard or click in the whitespace.

Editing HTML in Chrome
To edit HTML in Chrome:
- Right-click on a specific element where you wish to change the HTML, and select Inspect.
- In the main Elements window which shows all the HTML, right-click on the highlighted part (if this is the part you wish to change) and select Edit as HTML.
- You can change the HTML by typing directly into the text area, or you can remove that part of the HTML by selecting all of it and deleting it. Once your changes are done, simply click outside of the edit box.

Use Keyboard Shortcuts
These shortcuts will speed up your workflow significantly:
- CTRL + F (Find) – When creating HTML email signatures, CTRL + F is your friend! No really, it is! Why look for something manually when you can find it by using CTRL + F? Whether you’re inspecting elements in Chrome, or in Sublime looking for a specific line of code, CTRL + F is always available. Use it!
- CTRL + R (Refresh in Chrome) – When you’re confident editing your email signature HTML code, you tend to make changes fairly quickly and it sometimes becomes cumbersome to manually click the refresh button in your browser to reload the changes you’ve made to your HTML file. A quicker way is to just press CTRL + R in Chrome to reload the file.
- CTRL + H (Find and Replace in Sublime) – Sometimes you will need to make the same change in multiple places (eg. fonts/colors), and this is where Sublime’s Find and Replace feature comes in handy. You should always use Replace, rather than Replace All. Replacing one instance at a time reduces the chance of mistakes.
- CTRL + S (Save in Sublime) – Quite obvious, but worth mentioning as it’s sometimes forgotten.
- CTRL + Z (Undo in Sublime) – Sometimes mistakes are made, use undo to take some steps back.
- CTRL + SHIFT + Z (Redo in Sublime) – Want to go forward a few steps? Use redo – it’s super handy!
Don’t Get Caught by Impostrophes!
You’ll notice that some parts of the HTML code uses apostrophes. For example, when specifying a font-family CSS property, sometimes the font value uses single quotation marks which you will need to pay particular attention to.
This is particularly problematic when you copy HTML code from the internet because of how apostrophes are converted between say WordPress and a text editor such as Sublime.
What looks to you like an apostrophe, may actually be an impostrophe. Not sure what an impostrophe is?

Can you see the difference in the apostrophes? If you use the bad ones when dealing with HTML, you will run into issues.
Problems caused by impostrophes are sometimes very hard to troubleshoot.
All Code Serves a Purpose
A general rule when modifying HTML: If you don’t understand why it’s there, don’t touch it.
You may notice that some of the HTML/CSS code that we will be working with may contain weird/duplicate/additional parts that might seem unneeded. However, after spending over a decade testing email signatures, we’ve developed a deep understanding of how email applications render HTML. So you can rest assured that these weird bits of HTML/CSS are definitely needed to make your email signature compatible with as many email applications as possible.
Minified HTML
All of our template HTML files are minified in order to reduce the overall number of characters in the HTML. We do this because it provides a number of benefits, but mainly because Gmail has a 10,000 character limit for their email signatures.
Minified HTML

Unminified HTML

If you’re installing this email signature in Gmail, we recommend leaving the template minified, even while modifying the HTML code. Otherwise, if you’re installing this signature in another email app, feel free to use an online HTML beautifier tool to make the HTML code more readable.
Important: If you beautify the HTML code, do not minify it after you have completed editing the template. Our minification process is very unique (for email client compatibility reasons), and if you minify the HTML code again, it will likely break some parts of your email signature.
Get Familiar With the Workflow
To create an email signature without going completely insane, you will need to get familiar with the workflow for editing HTML files.

Using this workflow will make testing much easier and will ensure you have a better chance of catching any problems as they arise.
5. Getting Started
The next sections detail the procedure that should be followed to create an HTML email signature by modifying your downloaded template. The aim is to give you enough familiarity with email signature customization to quickly produce your own reliable design so you can then easily adjust it for each staff member in your organization.
1. Extract the downloaded email signature template ZIP file – You can either make a new folder or choose an existing area on your computer to extract the template files.
2. Open the template.html file in Google Chrome – You should be able to just double-click to open it in Chrome. If you can’t, then right-click on it and select Open with > Google Chrome. When it’s open, you should be able to see a complete signature including images. Keep the file open in Chrome as that is where you will be checking how your signature looks whenever you make any changes to the HTML code.
3. Open the template.html file in Sublime Text Editor – While Chrome is open, right-click on the file and select Open with > Sublime Text Editor. Another option is to drag and drop the file into Sublime Text Editor.
6. Text (inc colors, fonts, sizes, weights, styles)
- Web-Safe Fonts – Before changing any fonts, you should get yourself familiarized with web-safe fonts.
- Fallback Fonts – Getting an understanding of when and why fallback fonts are used is important.
Note: Before adding any new text, you will need to add a new row and/or column to the existing HTML table. Please check the Layout section for instructions.
- In Sublime, locate the new <td> element you have created.
- Place this code inside your <td> element:
<span style="font-family:Arial, Helvetica, sans-serif;font-size:12.0px;font-style:normal;line-height:16px;font-weight:400;color:#000000;display:inline;">New Text</span>
- Your updated code should look like this:
<td> <span style="font-family:Arial, Helvetica, sans-serif;font-size:12.0px;font-style:normal;line-height:16px;font-weight:400;color:#000000;display:inline;">New Text</span> </td>
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
- Head over to our Change Text section to make changes to your new text.
Changing Text
- In Chrome, locate the text you wish to change and note it down.
- In Sublime, press CTRL + F and type that text into the search bar that pops up, then click Find.
- Once you have found the text you want to change, simply highlight it and type in the new text that will replace it.
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
Changing Text Color
- In Chrome, locate the text you wish to change, note it down, right-click on it and click Inspect.
- In the Styles section, under element.style, you will see a CSS property called ‘color’ and there will be a color value assigned to it shown in a hexadecimal format (eg. #354052). Click on the colored box next to it to open the color picker and select the color you wish to change the text to. You will notice the color change on the text in your email signature as you change it in the color picker – this is helpful for selecting the right color.
- Once you’ve selected the color, confirm it by pressing Enter on your keyboard. Note down the new hexadecimal color value.
- In Sublime, press CTRL + F and type the text that you noted down earlier into the search bar that pops up, then click Find.
- Once you have found the text, it should be inside an <span> or <a> (if hyperlinked) element which has a style attribute and some CSS properties inside it. Find the ‘color’ property and change the hexadecimal value for it to the one you noted down earlier.
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
Changing Font
- In Chrome, locate the text you wish to change, note it down, right-click on it and click Inspect.
- Take a look through the list of web-safe fonts you could use and select one of them.
- In the Styles section, under element.style, you will see a CSS property called ‘font-family’ and there will be a comma-separated value assigned to it (eg. Arial, Helvetica, sans-serif). Click on the value to edit it. Change the first part of the value for the primary font, the second part for the fallback font, and the third part for the generic family fallback font. So, if the value was “Arial, Helvetica, sans-serif” before, and you wanted to change the font to Tahoma, the new value would be “Tahoma, Helvetica, sans-serif”. You will notice the font change on the text in your email signature as you change it – this is helpful for selecting the right font.
- Once you’ve selected the font, confirm it by pressing Enter on your keyboard. Note down the new font value.
- In Sublime, press CTRL + F and type the text that you noted down earlier into the search bar that pops up, then click Find.
- Once you have found the text, it should be inside an <span> or <a> (if hyperlinked) element which has a style attribute and some CSS properties inside it. Find the ‘font-family’ property and change the value for it to the one you noted down earlier.
- To increase email client compatibility for your email signature, you should also change the same ‘font-family’ property for the parent <td> element, only if the <span> is the only element inside it and there aren’t others.
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
Changing Font Size
- In Chrome, locate the text you wish to change, note it down, right-click on it and click Inspect.
- In the Styles section, under element.style, you will see a CSS property called ‘font-size’ and there will be a pixel value assigned to it (eg. 14.0px). Click on the value to manually type a new value into it, or press the up/down keys on your keyboard to increase/decrease font size. You will notice the font size change on the text in your email signature as you change it – this is helpful for selecting the right size font.
- Once you’ve selected the font size, confirm it by pressing Enter on your keyboard. Note down the new font size value.
- In Sublime, press CTRL + F and type the text that you noted down earlier into the search bar that pops up, then click Find.
- Once you have found the text, it should be inside an <span> or <a> (if hyperlinked) element which has a style attribute and some CSS properties inside it. Find the ‘font-size’ property and change the value for it to the one you noted down earlier.
- To increase email client compatibility for your email signature, you should also change the same ‘font-size’ property for the parent <td> element, only if the <span> is the only element inside it and there aren’t others.
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
Changing Font Weight (Bold on/off)
- In Chrome, locate the text you wish to change, note it down, right-click on it and click Inspect.
- In the Styles section, under element.style, you will see a CSS property called ‘font-weight’ and there will be a number value assigned to it (eg. 400). Click on the value to manually type a new value into it.
For normal weight, type ‘400’.
For bold weight, type ‘700’.
You will notice the font weight change on the text in your email signature as you change it – this is helpful for selecting the right font weight. - Once you’ve selected the font weight, confirm it by pressing Enter on your keyboard. Note down the new font weight value.
- In Sublime, press CTRL + F and type the text that you noted down earlier into the search bar that pops up, then click Find.
- Once you have found the text, it should be inside an <span> or <a> (if hyperlinked) element which has a style attribute and some CSS properties inside it. Find the ‘font-weight’ property and change the value for it to the one you noted down earlier.
- To increase email client compatibility for your email signature, you should also change the same ‘font-weight’ property for the parent <td> element, only if the <span> is the only element inside it and there aren’t others.
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
Changing Font Style (Italic on/off)
- In Chrome, locate the text you wish to change, note it down, right-click on it and click Inspect.
- In the Styles section, under element.style, you will see a CSS property called ‘font-style’ and there will be a value assigned to it (eg. normal). Click on the value to manually type a new value into it.
For normal style, type ‘normal’.
For italic style, type ‘italic’.
You will notice the font style change on the text in your email signature as you change it – this is helpful for selecting the right font style. - Once you’ve selected the font style, confirm it by pressing Enter on your keyboard. Note down the new font style value.
- In Sublime, press CTRL + F and type the text that you noted down earlier into the search bar that pops up, then click Find.
- Once you have found the text, it should be inside an <span> or <a> (if hyperlinked) element which has a style attribute and some CSS properties inside it. Find the ‘font-style’ property and change the value for it to the one you noted down earlier.
- To increase email client compatibility for your email signature, you should also change the same ‘font-style’ property for the parent <td> element, only if the <span> is the only element inside it and there aren’t others.
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
- In Chrome, locate the text you wish to remove and note it down.
- In Sublime, press CTRL + F and type that text into the search bar that pops up, then click Find.
- Once you have found the text you want to remove, you will want to delete the entire <span> element together with the text you want to remove inside it, and if the text is hyperlinked, the <a> element too.
For example:<span style="some-property:some-value">Text to Remove</span>
Note: Removing the <span> and/or <a> element(s) won’t remove other table-related code such as the surrounding <td>, <tr>, <tbody>, and <table> elements that may no longer be needed. If you want to remove these, please follow the instructions in the Layout section.
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
7. Images (inc social icons, sizes)
- Free Social Icons Download – If you’re looking to add/change social icons, there is a huge library of free social icons available for you to use.
- Image Formats – Not all image formats are created equal! Learn what image format you should be using in your email signature.
- Avoiding Blurry/Pixelated Images – Learn how to avoid blurry or pixelated images in email signatures.
Note 1: Before adding a new image, you will need to add a new row and/or column to the existing HTML table. Please check the Layout section for instructions.
Note 2: You will first need to find a service to host your image on the internet. You can use your own web hosting company or a service like Google Drive for this. You will need a URL for your image in order to use it in your email signature.
- Take note of the size of your new image in pixels (width x height).
- In Sublime, locate the new <td> element you have created.
- Place this code inside your <td> element:
<img width="(1/3 of the noted new image width)" height="(1/3 of the noted new image height)" alt="image" border="0" src="(your image URL)">
- Your updated code should look like this:
<td> <img width="(1/3 of the noted new image width)" height="(1/3 of the noted new image height)" alt="image" border="0" src="(your image URL)"> </td>
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
- Head over to our Change an Image section if you need to make changes to your new image.
Changing an Image
Note: You will first need to find a service to host your image on the internet. You can use your own web hosting company or a service like Google Drive for this. You will need a URL for your image in order to use it in your email signature.
- Take note of the size of your new image in pixels (width x height).
- In Chrome, locate the image you wish to change, right-click on it and click Inspect.
- In the Elements section, you will see the <img> element highlighted. Note down the URL value in the src attribute.
- In Sublime, press CTRL + F and type that noted URL value into the search bar that pops up, then click Find.
- Once you have found the <img> element you want to change, simply update the value in the src attribute to your new image URL.
- If your new image is a different size from the old image, you will need to update the following attributes in the <img> element:
width="(1/3 of the noted new image width)" height="(1/3 of the noted new image height)"
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
Changing Image Size
- In Chrome, locate the image you wish to change, right-click on it and click Inspect.
- In the Elements section, you will see the <img> element highlighted. Note down the URL value in the src attribute.
- The <img> element has height and width attributes. To change the image size, simply double-click on either value, type the new value in, and press Enter on your keyboard. However, you will want to update the height and width while maintaining the aspect ratio of the image. You can use an aspect ratio tool to calculate your new image dimensions based on the old image’s height and width.
- Once you have worked out the new dimensions, change the height and width attribute values in the <img> element in Chrome to make sure it looks correct.
- In Sublime, press CTRL + F and type the noted URL value into the search bar that pops up, then click Find.
- Once you have found the <img> element you want to change, simply update the height and width attribute values to your newly calculated dimensions.
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
- In Chrome, locate the image you wish to remove, right-click on it and click Inspect.
- In the Elements section, you will see the <img> element highlighted. Note down the URL value in the src attribute.
- In Sublime, press CTRL + F and type that URL into the search bar that pops up, then click Find.
- Once you have found the image you want to remove, you will want to delete the whole <img> element.
Note: Removing the <img> element won’t remove other table-related code such as the surrounding <td>, <tr>, <tbody>, and <table> elements which may no longer be needed. If you want to remove these, please follow the instructions in the Layout section. - Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
8. Separators (inc colors, width/height)
Note: Before adding a new separator, you will need to add a new row and/or column to the existing HTML table. Please check the Layout section for instructions.
- In Sublime, locate the new <td> element you have created.
- Add the following style attribute to your <td> element:
For vertical separators:style="border-collapse:collapse;background-color:#e87021;width:2px;vertical-align:super;padding:0px!important;"
For horizontal separators:
style="border-collapse:collapse;background-color:#e87021;height:2px;padding:0px!important;"
- Your updated code should look like this (for a vertical separator):
<td style="border-collapse:collapse;background-color:#e87021;width:2px;vertical-align:super;padding:0px!important;"></td>
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
- Head over to our Change a Separator section if you need to make changes to your new separator.
Changing Separator Color
- In Chrome, locate the separator you wish to change, right-click on it and click Inspect.
- In the Styles section, under element.style, you will see a CSS property called ‘background-color’ and there will be a color value assigned to it shown in a hexadecimal format (eg. #e87021). Note down the current hexadecimal color value and any other CSS properties or attributes around it to make it easier to find later.
Click on the colored box next to it to open the color picker and select the color you wish to change the separator to. You will notice the color change on the separator in your email signature as you change it in the color picker – this is helpful for selecting the right color. - Once you’ve selected the color, confirm it by pressing Enter on your keyboard. Note down the new hexadecimal color value.
- In Sublime, press CTRL + F and type in the old hexadecimal color value that you noted down earlier into the search bar that pops up, then click Find.
- Once you have found the separator, it should be an <td> element with no child elements inside it, and it should have a style attribute and some CSS Properties inside it. Find the ‘background-color’ property and change the hexadecimal value for it to the new one you noted down earlier.
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
Changing Separator Width/Height
- In Chrome, locate the separator you wish to change, right-click on it and click Inspect.
- In the Styles section, under element.style, you will see a CSS property called ‘background-color’ and there will be a color value assigned to it shown in a hexadecimal format (eg. #e87021). Note down that hexadecimal color value and any other CSS properties or attributes around it to make it easier to find later.
You will also see a CSS Property called ‘width’ or ‘height’ and there will be a pixel value assigned to it (eg. 2px). Click on the value to manually type a new value into it, or press the up/down keys on your keyboard to increase/decrease the width or height. You will notice the width/height change on the separator in your email signature as you change it – this is helpful for selecting the right width/height. - Once you’ve selected the width/height, confirm it by pressing Enter on your keyboard. Note down the new height/width.
- In Sublime, press CTRL + F and type in the hexadecimal color value that you noted down earlier into the search bar that pops up, then click Find.
- Once you have found the separator, it should be an <td> element with no child elements inside it, and it should have a style attribute and some CSS properties inside it. Find the ‘width’ or ‘height’ property (whichever one you changed) and change the pixel value for it to the new one you noted down earlier.
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
- In Chrome, locate the separator you wish to remove, right-click on it and click Inspect.
- In the Styles section, under element.style, you will see a CSS property called ‘background-color’ and there will be a color value assigned to it shown in a hexadecimal format (eg. #e87021). Note down that hexadecimal color value.
- In Sublime, press CTRL + F and type that hexadecimal color value into the search bar that pops up, then click Find.
- Once you have found the separator you want to remove, you will want to delete the whole <td> element.
Note: Removing the <td> element won’t remove other table-related code such as the surrounding <tr>, <tbody>, and <table> elements which may no longer be needed. If you want to remove these, please follow the instructions in the Layout section. - Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
9. Spacing
Note: Before adding a new space, you will need to add a new row and/or column to the existing HTML table. Please check the Layout section for instructions.
- In Sublime, locate the new <td> element you have created.
- Add the following style attribute to your <td> element:
For vertical space:style="border-collapse:collapse;padding-right:10px;"
For horizontal space:
style="border-collapse:collapse;padding-bottom:10px;"
- Your updated code should look like this (for a vertical space):
<td style="border-collapse:collapse;padding-right:10px;"></td>
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
- Head over to our Change a Space section if you need to make changes to your new separator.
Changing Space Width/Height
- In Chrome, locate the space you wish to change, right-click on it and click Inspect.
- In the Styles section, under element.style, you will see a CSS property called ‘padding-right’ (width) or ‘padding-bottom’ (height) and there will be a pixel value assigned to it (eg. 20px). Note down that pixel value and any other CSS properties or attributes around it to make it easier to find later.
Click on the value to manually type a new value into it, or press the up/down keys on your keyboard to increase/decrease the width or height. You will notice the width/height of the space change in your email signature as you change it – this is helpful for selecting the right width/height. - Once you’ve selected the width/height, confirm it by pressing Enter on your keyboard. Note down the new height/width.
- In Sublime, press CTRL + F and type in the old pixel value that you noted down earlier into the search bar that pops up, then click Find.
- Once you have found the space, it should be an <td> element and it should have a style attribute and some CSS properties inside it. Find the ‘padding-right’ or ‘padding-bottom’ property (whichever one you changed) and change the pixel value for it to the new one you noted down earlier.
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
- In Chrome, locate the space you wish to remove, right-click on it and click Inspect.
- In the Styles section, under element.style, you will see a CSS property called ‘padding-right’ (width) or ‘padding-bottom’ (height) and there will be a pixel value assigned to it (eg. 20px). Note down that pixel value and any other CSS properties or attributes around it to make it easier to find later.
- In Sublime, press CTRL + F and type that pixel value into the search bar that pops up, then click Find.
- Once you have found the space you want to remove, it should be an <td> element and it should have a style attribute and some CSS properties inside it.
If the <td> element has a child element: Find the ‘padding-right’ or ‘padding-bottom’ CSS property (whichever one you want to remove) and remove the CSS property and the pixel value for it from the style attribute.
If the <td> element has no child elements: You will want to delete the whole <td> element.
Note: Removing the <td> element won’t remove other table-related code such as the surrounding <tr>, <tbody>, and <table> elements which may no longer be needed. If you want to remove these, please follow the instructions in the Layout section. - Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
10. Hyperlinks
- Hyperlinks and Email Signatures – More information about when to use hyperlinks in email signatures.
- Click-to-Call Links – What they are, their benefit, and how click-to-call links work.
- Tracking Clicked Links – Learn how to set up Google Analytics to track your clicked links.
Add a Text Hyperlink
- In Chrome, locate the text you wish to add a hyperlink to and note it down.
- In Sublime, press CTRL + F and type that text into the search bar that pops up, then click Find.
- Once you have found the text, it should be inside an <span> element which has a style attribute and some CSS properties inside it.
- Add the following <a> element surrounding the text, but inside the <span> element, and change the href attribute to your chosen hyperlink URL:
<a target="_blank" rel="nofollow" href="https://www.example.com">YOUR TEXT</a>
- Cut the style attribute and all the CSS properties from the <span> element and paste it into the <a> element.
- Add the following CSS property and value to the style attribute of the <a> element:
text-decoration:none;
- Your updated code should look like this:
<span> <a target="_blank" rel="nofollow" href="https://www.example.com" style="font-family:Arial, Helvetica, sans-serif;font-size:12.0px;font-style:normal;line-height:16px;font-weight:400;color:#000000;display:inline;text-decoration:none;">YOUR TEXT</a> </span>
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
- Head over to our Change a Hyperlink section if you need to make changes to your new hyperlink.
Add an Image Hyperlink
- In Chrome, locate the image you wish to add a hyperlink to, right-click on it and click Inspect.
- In the Elements section, you will see the <img> element highlighted. Note down the URL value in the src attribute.
- In Sublime, press CTRL + F and type that noted URL into the search bar that pops up, then click Find.
- Add the following <a> element surrounding the <img> element, and change the href attribute to your chosen hyperlink URL:
<a target="_blank" rel="nofollow" style="font-size:0px;line-height:0px;" href="https://www.example.com">YOUR IMG ELEMENT</a>
- Your updated code should look like this:
<a target="_blank" rel="nofollow" style="font-size:0px;line-height:0px;" href="https://www.example.com"> <img width="<image width>" height="<image height>" alt="image" border="0" src="<your image URL>"> </a>
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
- Head over to our Change a Hyperlink section if you need to make changes to your new hyperlink.
Change a Text Hyperlink
Note: To change the visible text of a hyperlink, take a look at our Change Text section.
- In Chrome, locate the text you wish to change the hyperlink for, right-click on it and click Inspect.
- In the Elements section, you will see the <a> element highlighted. Note down the URL value in the href attribute.
- In Sublime, press CTRL + F and type that URL value into the search bar that pops up, then click Find.
- Once you have found the <a> element you want to change, simply update the value in the href attribute to your new URL.
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
Change an Image Hyperlink
Note: To change the visible image of a hyperlink, take a look at our Change an Image section.
- In Chrome, locate the image you wish to change the hyperlink for, right-click on it and click Inspect.
- In the Elements section, you will see the <img> element highlighted. Look at the parent <a> element, and note down the URL value in the href attribute.
- In Sublime, press CTRL + F and type that URL value into the search bar that pops up, then click Find.
- Once you have found the <a> element you want to change, simply update the value in the href attribute to your new URL.
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
Remove a Text Hyperlink
- In Chrome, locate the text you wish to remove the hyperlink for, right-click on it and click Inspect.
- In the Elements section, you will see the <a> element highlighted. Note down the URL value in the href attribute.
- In Sublime, press CTRL + F and type that URL value into the search bar that pops up, then click Find.
- Once you have found the <a> element you want to remove, add the following <span> element surrounding the text, but inside the <a> element:
<span>YOUR TEXT</span>
- Cut the style attribute and all the CSS properties from the <a> element and paste it into the <span> element.
- Remove the following CSS property and value from the style attribute of the <span> element:
text-decoration:none;
- Your updated code should look like this:
<a target="_blank" rel="nofollow" href="https://www.example.com"> <span style="font-family:Arial, Helvetica, sans-serif;font-size:12.0px;font-style:normal;line-height:16px;font-weight:400;color:#000000;display:inline;">YOUR TEXT</span> </a>
- Remove the <a> element’s opening and closing tags.
- The code you should be left with is this:
<span style="font-family:Arial, Helvetica, sans-serif;font-size:12.0px;font-style:normal;line-height:16px;font-weight:400;color:#000000;display:inline;">YOUR TEXT</span>
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
Remove an Image Hyperlink
- In Chrome, locate the image you wish to remove the hyperlink for, right-click on it and click Inspect.
- In the Elements section, you will see the <img> element highlighted. Look at the parent <a> element, and note down the URL value in the href attribute.
- In Sublime, press CTRL + F and type that noted URL into the search bar that pops up, then click Find.
- Once you have found the <a> element you want to remove, simply remove the <a> element entirely (don’t forget to remove the closing tag). However, be sure not to remove the child <img> element, otherwise your image will not be visible anymore.
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
11. Layout
- HTML Tables – A good understanding of HTML tables is recommended before modifying an email signature layout.
- In Chrome, locate an empty area where you wish to add a new row, right-click on it and click Inspect.
- In the Elements section, you should see a <td> element highlighted. If you don’t, you will need to locate the parent <td> element and click on it to highlight it.
- You will need to note down any relevant information you can use to find that <td> element later in Sublime. If the highlighted <td> has:
A <span> child element: Note down the text value inside the <span> element.
A <img> child element: Note down the URL value in the href attribute in the <img> element.
No child element: In the Styles section, under element.style, you will see a CSS property called ‘padding-right’ (width) or ‘padding-bottom’ (height) and there will be a pixel value assigned to it (eg. 20px). Note down that pixel value and any other CSS properties or attributes around it to make it easier to find later. - In Sublime, press CTRL + F and type the noted value from the above step into the search bar that pops up, then click Find.
- Once you have found the right <td> element, you will need to work your way down the document and locate the closing tag of the first parent <table> element.
For example:<table> <tbody> <tr> <td> <-- <td> element </td> <-- <td> element </tr> </tbody> </table> <-- closing tag of the first parent <table> element
You want to insert your new row code (below) directly after the closing </table> tag.
- To add a new row, add the following <table> element:
<table border="0" cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;"> <tbody> <tr> </tr> </tbody> </table>
- Press CTRL + S to save in Sublime.
- You will need to Add a Column inside your new row before you can add any images or text to it.
- In Chrome, locate the row you wish to remove, right-click on it and click Inspect.
- In the Elements section, you should see a <td> element highlighted. If you don’t, you will need to locate the parent <td> element and click on it to highlight it.
- You will need to note down any relevant information you can use to find that <td> element later in Sublime. If the highlighted <td> has:
A <span> child element: Note down the text value inside the <span> element.
A <img> child element: Note down the URL value in the href attribute in the <img> element.
No child element: In the Styles section, under element.style, you will see a CSS property called ‘padding-right’ (width) or ‘padding-bottom’ (height) and there will be a pixel value assigned to it (eg. 20px). Note down that pixel value and any other CSS properties or attributes around it to make it easier to find later. - In Sublime, press CTRL + F and type the noted value from the above step into the search bar that pops up, then click Find.
- Once you have found the right <td> element, you will need to work your way outwards and locate the opening and closing tags of the first parent <table> element.
For example:<table> <-- opening tag of the first parent <table> element <tbody> <tr> <td> <-- <td> element </td> <-- <td> element </tr> </tbody> </table> <-- closing tag of the first parent <table> element
- To remove a row, you will want to delete the whole <table> element from the opening tag to the closing tag, including everything inside it.
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
Note: If you’ve just created a new row, you can skip to step 6.
- In Chrome, locate an empty area where you wish to add a new column, right-click on it and click Inspect.
- In the Elements section, you should see a <td> element highlighted. If you don’t, you will need to locate the parent <td> element and click on it to highlight it.
- You will need to note down any relevant information you can use to find that <td> element later in Sublime. If the highlighted <td> has:
A <span> child element: Note down the text value inside the <span> element.
A <img> child element: Note down the URL value in the href attribute in the <img> element.
No child element: In the Styles section, under element.style, you will see a CSS property called ‘padding-right’ (width) or ‘padding-bottom’ (height) and there will be a pixel value assigned to it (eg. 20px). Note down that pixel value and any other CSS properties or attributes around it to make it easier to find later. - In Sublime, press CTRL + F and type the noted value from the above step into the search bar that pops up, then click Find.
- Once you have found the right <td> element, you will need to locate the closing tag of that <td> element.
For example:<td> <-- opening tag of your highlighted <td> element </td> <-- closing tag of your highlighted <td> element
You want to insert your new column code (below) directly after the closing </td> tag.
- To add a new column, add the following <td> element:
<td style="border-collapse:collapse;line-height:0px;padding-right:10px;"> </td>
- Press CTRL + S to save in Sublime.
- You can now Add Text, Add an Image, or Add a Separator inside your new column.
Note: If this is the last column in a row, you may want to Remove a Row instead.
- In Chrome, locate the column you wish to remove, right-click on it and click Inspect.
- In the Elements section, you should see a <td> element highlighted. If you don’t, you will need to locate the parent <td> element and click on it to highlight it.
- You will need to note down any relevant information you can use to find that <td> element later in Sublime. If the highlighted <td> has:
A <span> child element: Note down the text value inside the <span> element.
A <img> child element: Note down the URL value in the href attribute in the <img> element.
No child element: In the Styles section, under element.style, you will see a CSS property called ‘padding-right’ (width) or ‘padding-bottom’ (height) and there will be a pixel value assigned to it (eg. 20px). Note down that pixel value and any other CSS properties or attributes around it to make it easier to find later. - In Sublime, press CTRL + F and type the noted value from the above step into the search bar that pops up, then click Find.
- To remove a column, you will want to delete the whole <td> element from the opening tag to the closing tag, including everything inside it.
- Press CTRL + S to save in Sublime, and CTRL + R to refresh in Chrome.
Finishing Up
Although this tutorial is long and very thorough, hopefully you’ve learned how to create an HTML email signature that is professional and functional!
Once you’ve finished creating your email signature, head over to our installation guides for help with installing it to your email application.