html-online-marketerYou’ve been there before, you are finishing up a finely crafted email,  and you are almost ready for your campaign. You just need to send a test to yourself to make sure everything is in good shape. You click the email open, ready to give yourself a good pat on the back, when something is wrong–the format doesn’t look the same as it did in your email platform of choice.

eMarketer reports, “94% of US marketers were either using or planned to use email marketing as of November 2010, pointing to a highly adopted, mature communication format.” That said, how well are your emails displaying over different email clients, such as Outlook, Gmail and Yahoo? What one email client may read automatically, another may display differently.

Sometimes, it is a design flaw, maybe you have all your content in an image, (big no, no by the way) or you just can’t understand why a huge space is showing up in Outlook, but looks perfect in Gmail. This is where some simple knowledge of HTML can come in handy. Looking at the code can show why, and how these little differences can occur. Do you know what you are looking at?

When you first look at an email in HTML, it can be daunting and look like ancient Egyptian. Ok, HTML might not look like hieroglyphics, but it is something as an online marketer you need to get used to. Below are some simple codes you need to know, and help you decipher  what is what.

New Paragraphs
In HTML you can find where a new paragraph starts by finding this–> <p>. An easy way to remember this is “p” is for paragraph. If your email doesn’t have these in the code, add them. It will help with weird spacing issues, and make your code cleaner to read on the back end. On the same note, to code the end of a paragraph use–> </p>. Whenever using any code, I like to think of it as opening and closing an area. <p> opens the paragraph, and </p> closes it.

Character Manipulation
If you want to bold, italicize or underline any text, the following codes will do the trick.

  • Bold–> <b> Think of it as “b” is for bold. Remember the bolding will not stop until you close it out with </b>.
  • Italicize–> <i> Again “i” is for italicize, and don’t forget the </i> to close out the effect.
  • Underline–> <u> You got it, “u” is for underline!

To add a hyperlink to a word or phrase you will do the following <a href=””>ANCHOR TEXT</a>.

This is where it starts to get a little tricky. To get bullets into your copy you need to start the code with <ul>. I don’t have a fun way to remember this one, but I’m sure there is a story behind its conception. Once you have started the code each bullet needs to start with–> <li>. “Li” can be remembered for list, because you are listing out bullet points. Each specific bullet will need to be closed off as well. Look at my example below.

<li> List number one</li>
<li>List number two</li>
<li>List number three</li>
*note how I closed out the entire bullet list with–> </ul>.

Sometimes you need a space, and for whatever reason your email editor won’t read it. In pure HTML a space doesn’t actually occur. Instead you need to insert this bit of code–> &nbsp; Note, you do not use a carrot OR need to open or close this command. It’s an odd one, so you may need to save it somewhere for reference.

“Ugly” Code
Sometimes knowing some basic HTML, like the ones above can help you get rid of unnecessary code. If you use Microsoft Word to write your content, make sure YOU DON’T COPY AND PASTE directly into your email platform. Word will add unnecessary characters of code, and mess up your entire layout. Instead, copy and paste into Notepad on a PC and TextEdit on a Mac (make sure to switch to plain text mode). Then, from Notepad/TextEdit you can copy your email and paste it into your email client. If you have any bolding, links or other layout commands, knowing these codes will help you out. 

Do you have a trick for online marketers regarding HTML? Let us know in the comments below.

Image Credit: V-Type MEDiA