Creating a HTML Email Signature

Creating a custom signature is one of those details that can add professionalism to your emails and reinforce your brand. There are, however, complications that can arise when attempting to create a signature due to the intricacies of email clients. Some crafty HTML can help resolve these problems and create a functional email signature.

One of the first things to consider when coding an HTML email signature is that you need to use tables instead of regular HTML markup. The primary reason being that Outlook 2007/2010/2013 uses Microsoft Word to render emails and, accordingly, does not support more complex CSS.

As with any other HTML file, you need opening and closing html, head and body tags. Additionally, you will need a table tag which will contain the content of the email. It is generally a good idea to add a fixed width to the table in order to restrict the signature and create a consistent design across all email clients. In this example, we are using a width of 500px.

Note: After the table tag there has to be a tbody tag followed by the tr (row) and td (cell) tags.

You may want to include a graphical element such as your company's logo in the signature. To do this, add a tr tag with a td inside of it. This td will wrap the image. Like the original table wrapper, this td should have a fixed width and height in accordance with the dimensions of the image. As an aside, the image needs to be stored on a server and the img tag should use an absolute path.

Now it's time to add the individual's information. Another row and cell are needed for this new element. On the cell, add the style you want to use for the text and set a height to manage the spacing between the logo and the following paragraph. In this case, "font-family: Helvetica, Arial, sans-serif, font-size:18px, and font-style: bold" is the main CSS which will control the text content.

The cell is going to act as a paragraph tag, so you only need to add the necessary text information. In this example, this information includes an employee's name and his position within the company. If you want to have a different style to the position field, added an em tag with the inline styling that will apply to that element only.

You can repeat the same steps with the address, phone number, or any other information you would like to add. Email information, a website link, and social media links have been included in this example.

On the links, mouse hover colors can be controlled by using "onMouseOver" and "onMouseOut" events:

All together, your HTML should look like the complete code below:

Email signatures are fairly easy and can be used similarly with multiple individuals in an organization. With a little practice you will master HTML email signatures and create a unique branding element for your company.