Preview your email in the most popular email clients and mobile devices.    Try it for FREE!

5 Reasons You Should Always Validate Your HTML Code When Developing Emails

Posted November 9, 2011 by Michelle Klann

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

Coding errors in web pages are one thing but errors in HTML emails are an entirely different story. So why is it so much more important? Here are 5 reasons why you should always validate your HTML when developing emails.

1.) You'll be sharing center stage with web based email clients like Gmail and Hotmail Many web clients do not make use of iframes for displaying your email. Instead, you share the web browser with their interface and often times, they will do their best to ensure there's no conflict. That said, their interface often comes equip with lots of embedded styles, container elements (ie DIVs) and fancy client side scripts for displaying banners or cropping off a portion your beautiful email design.

2.) A random "</div>" can stick a wrench in Gmail and Hotmail DIV's can be easy to mess up, especially if you have several nested so let's say you accidentally leave an extra </div> somewhere in your code... This will inadvertently close one of Gmail or Hotmail's UI div's and that can leave a big mark, especially if it's in the middle of your email design.

3.) Desktop email clients render errors differently Each desktop email client uses a specific rendering engine. Unfortunately each rendering engine handles coding errors differently and some are more lenient than others. With that in mind, it's always best to test your email in the most popular web browsers first, then run an Acid Test to preview your email in the most popular email clients before sending.

4.) Empty TD's will get their fill from Gmail Gmail doesn't like empty table cells so if you are trying to achieve a 1px space, you might get unexpected results. For example, this:

<td width="1">  </td>

Will get converted to this:

<td width="1"> &nbsp &nbsp </td>

5.) If you have random elements in your tables, Gmail will try to fill in the blanks Let's say you have content that should be inside a table cell:

<table>
  	this is a test
 	<tr>
   		<td>contents...</td>
 </tr>
 <div>this is a div</div>
</table>

Gmail will wrap your random content inside table rows:

<table>
 	<tr>
   		<td> this is a test </td>
 	</tr>
 	<tr>
   		<td>contents...</td>
 	</tr>
 	<tr>
   		<td><div>this is a div</div></td>
 	</tr>	
</table>

If you have more than one cell, it still renders only one new table row. For example:

<table>
  	this is a test
 	<tr>
    		<td>contents...1</td>
    		<td>contents...2</td>
 	</tr>
 	<div>this is a div</div>
</table>

Is converted to this:

<table>
 	<tr>
    		<td> this is a test </td>
 	</tr>
 	<tr>
    		<td>contents...1</td>
    		<td>contents...2</td>
 	</tr>
 	<tr>
   		<td><div>this is a div</div></td>
 	</tr>	
</table>

If you have random text inside the TR but not in the TD Gmail will create a new TD.  For example this:

<table>
 	<tr>
      	this is a test
     		<td>contents...1</td>
    	 	<td>contents...2</td>
 	</tr>
 	<div>this is a div</div>
</table>

Is converted to:

<table>
 	<tr>
   		<td> this is a test </td>
   		<td>contents...1</td>
   		<td>contents...2</td>
 	</tr>
 	<tr>
   		<td><div>this is a div</div></td>
 	</tr>	
</table>

In Conclusion

When you submit your email through our testing tool, the first thing we do is check for validation errors. This error report is based on your DOCTYPE. If we find anything, you can cancel out of the test, correct the issues, and re-run your email without charge.

Comments

B. Moore pic
B. Moore
I have never had a problem with gmail doing things like these:

<tr>
<td width="1px" style="width:1px;"></td>
</tr>

or

<tr>
<td height="1px" style="height:1px;"></td>
</tr>
Posted 11/10/2011

Avatar
Michelle Klann
B.Moore,

Gmail must be converting special "space" characters to "&nbsp;". We've had people submit tests in the past where I saw this happening. In pulling from those past tests, I can only deduct that they had exported from Word or that they had cut/pasted content that had special "space" characters. For example, I just ran the following:

Table 1 (spaces created by a notepad editor)
<table><tr><td> </td></tr></table>

Table 2 (spaces I cut/pasted from prior emails which were submitted to us by our members)
<table border="0">
<tr>
<td>  </td>
</tr>
</table>

Table 3 (I also tried removing carriage returns here)
<table border="0"><tr><td>  </td></tr></table>

Table 2 and 3 rendered "&nbsp;&nbsp;" inside the cells whereas 1 did not. So the moral of this story is that you are probably OK if you don't have any characters within your empty TD.

Thanks B!
Posted 11/10/2011

Comment via our Blog

Name:
Email:
Location:
URL:

Comment:

Remember my personal information
Notify me of follow-up comments?

Please enter the word you see in the image below:

x
Sign up for our Newsletter

And get updates on the latest email tips, tricks and hacks!