HTML Email Tutorial

by Vince

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- DEFAULT CORE STYLES -->
<!-- ALL CODE IS INLINE, MEANING ON THE SAME DOCUMENT -->
<style>
html, body {margin: 0; padding: 0;}
.appleLinksDate a {color: #000000; text-decoration: none;}
@media only screen and (max-width: 600px) {
	table[class="container"] {width: 95% !important;}
	th[class="force-col"] {display: block !important; width: 100% !important;}
	img[class="stretch-image"] {width: 100% !important; height: auto !important;}
}
</style>
<!-- / DEFAULT CORE STYLES -->
</head>
<body>
<!--
HTML EMAILS:
Main rules
All emails render best with tables. Always remember that. Web pages can be done with a lot more flexible options for structuring content. But for Emails, the limit is tables and sometimes divs.
Structure a Table
The structure of a table is always the same.
table > tbody > tr > td
A <table> is the outter shell of the table.
-->
<!-- outer_container -->
<!--
TIP: I prefer to write my code with tabs instead spaces.
It helps the programmer read your code more quickly and
efficiently. Some people prefer spaces. Its no big deal, the
page or software will render the same.
-->
<!--
On the same note, notice how I indent my tables structures.
I do it this way because tables contain so many HTML tags,
that seeing them vertically instead of indented makes it
easier to see where the tags meet. And it also saves horizontal
space.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" style="padding-top: 15px;">
	<!-- 600px_width_table -->
	<!--
	NOTE:
	The class name "container" which will change the width to 95%
	-->
	<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" class="container">
	<tbody>
	<tr>
	<td align="center" bgcolor="#FFFFFF">
		
		<!-- ALL YOUR INNER CODE WILL BEGIN HERE -->
		<!--
		NOTE:
		FONTS CAN BE USED ON THE...