We wrap your email wrapper HTML in an additional piece of HTML boilerplate to provide a consistent HTML structure and fix common email client bugs. CSS here is not inlined, and CSS you add will not be inlined to this boilerplate for speed purposes.
Therefore, you do not have to (and should not) start your wrapper HTML with html, head, or body tags, just start right in.
Here is the code we use, for your reference:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="{{ activist language }}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
#outlook a {padding:0;}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
.image_fix {display:block;}
p {margin: 1em 0;}
h1, h2, h3, h4, h5, h6 {color: #404040}
table td {border-collapse: collapse;}
@media only screen and (max-device-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: blue;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: orange;
pointer-events: auto;
cursor: default;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: blue;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: orange;
pointer-events: auto;
cursor: default;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
}
@media only screen and (-webkit-device-pixel-ratio:.75){
}
@media only screen and (-webkit-device-pixel-ratio:1){
}
@media only screen and (-webkit-device-pixel-ratio:1.5){
}
</style>
<!--[if IEMobile 7]>
<style type="text/css">
</style>
<![endif]-->
<!--[if gte mso 9]>
<style>
</style>
<![endif]-->
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="margin: 0;padding: 0;background-color: #FFFFFF;width: 100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
<center>
<table cellpadding="0" cellspacing="0" border="0" align="center" id="backgroundTable" style="margin: 0;padding: 0;background-color: #FFFFFF;height: 100% !important;width: 100% !important; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" role="presentation">
<tr>
<td align="center" valign="top" style="border-collapse: collapse;">
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border: 0;background-color: #FFFFFF; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" role="presentation">
<tr>
<td align="center" valign="top" style="border-collapse: collapse;">
<!-- ********************************
*
*
* your wrapper/email content goes here!
*
*
********************************** -->
</td>
</tr>
<tr>
<td align="center" valign="top" style="border-collapse: collapse;">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF;border-top: 2px solid #909090; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" role="presentation">
<tr>
<td valign="top" style="border-collapse: collapse;">
<table border="0" cellpadding="10" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" role="presentation">
<tr>
<td colspan="2" valign="middle" style="border-collapse: collapse;background-color: #FFFFFF;border-top: 0;">
<div style="color: #707070;font-family: Arial;font-size: 11px;line-height: 125%;text-align: left;">
Sent via <a href="http://actionnetwork.org">ActionNetwork.org</a>.
To update your email address or to stop receiving emails from [your group name], please <a href="[unsub link]" style="color: #0096DB;font-weight: normal;text-decoration: underline;">click here</a>.
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
</center>
</body>
</html>