Pin Me

How Do I Make an HTML Email Signature?

written by: •edited by: Michele McDonough•updated: 3/21/2011

Don't just type "Regards, John" at the end of an email - use an email signature that you can set up in your email application. If you're not sure how to get started, turn to these templates for help!

  • slide 1 of 4

    Why Use an Email Signature?

    Email applications can be used to display more than just the message you’re sending – you can take advantage of advanced functions to automatically insert a signature into all of your emails, a very useful means of providing information about who you are and what you do.

    Such signatures can be entered in different ways, depending upon the email software. For instance some email sigs will be limited to plain text, while others can be enhanced with links and color thanks to the use of HTML. It is a simple task to set up a plain text email signature in Outlook, for instance, but the best results require and HTML signature.

    Including an email signature with HTML is an effective way of communicating your contact information and in the right circumstances can lead to considerable personal benefits.

  • slide 2 of 4

    Building an Email Signature

    Before getting to work with building an email signature in HTML, you need to have a think about the information you want to include.

    This might be:

    • Name
    • Position or role
    • Organization
    • Telephone number
    • URL
    • Alternative contact methods (instant messaging, etc)

    You should also give some thought to color. By taking advantage of a HTML email signature, you can use color and select different fonts and styles. These can be used to great effect to either make you stand-out, reflect your organization’s recognized colors, or both.

    There are also ways to include an image of perhaps a company logo or a band of color to finish off your HTML email signature.

  • slide 3 of 4

    A Simple HTML Email Signature Template

    There are different ways of creating an email signature. You might create it in Microsoft Word and save the file as HTML before setting it up as your favored signature in your email client, or you might create it from scratch in a text editor.

    A simple HTML email signature template might be:

    <p>Best Regards<br />

    Your Name<br />

    Your Position</p>

    <p>Organization Name</p>

    <p>Telephone</p>

    Which would end up looking something like this:

    Best Regards

    Christian Cawley

    Writer

    Bright Hub

    01234 567890

    This is of course just a basic template, ignoring all of the mark-up stylings that can be used with HTML. A better styled and professional looking example can be found in the image on the right.

  • slide 4 of 4

    Create a Styled HTML Email Signature Template

    To improve on the signature above, you can take advantage of traditional HTML markup or the <style> tag.

    For instance I might want my name and telephone number to appear more prominently than my position and salutation. To do this I could start off with just the bold tag:

    <p>Best Regards<br />

    <strong>Christian Cawley</strong><br />

    Writer</p>

    <p>Bright Hub</p>

    <p><strong>01234 567890</strong></p>

    Or I might take advantage of some slightly more advanced styling and apply some colors as well as font styles:

    <p><span style='font-size:10.0pt;

    font-family:Arial;color:#666699;mso-bidi-font-style:italic'>Best Regards</span><br />

    <strong><span style='font-size:10.0pt;

    font-family:Arial;color:darkblue;mso-bidi-font-style:italic'>Christian Cawley</span></strong><br />

    Writer</p>

    <p>Bright Hub</p>

    <p><strong><span style='font-size:10.0pt;font-family:Arial;

    color:#666699’>01234 567890</span></strong></p>

    You might copy the above into a text editor like Notepad or Notepad++ and play around with it, saving the file as HTML and checking how it looks in your browser.

    In order to use a signature like this in an email program, you will need to save it as HTML and then use your email software to browse for the file in the email settings box. Where this is found depends upon your preferred email client.