When using the HTML block in the Campaign Email Editor , please follow these guidelines to ensure proper email rendering across all email clients.
DO NOT USE:
<html>
<head>
<body>
<footer>
<header>
<section>
<article>
<aside>
<nav>
Why: The email editor automatically wraps your content in the proper email structure. Adding these tags will cause conflicts and rendering issues.
Correct Approach: Start directly with your content, using <table> as the main container.
<!-- ✅ Correct -->
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Your email content starts here
</td>
</tr>
</table>
DO NOT USE:
JavaScript (including any <script> tags)
Flash
Forms (<form>, <input>, <textarea>, <select>, etc.)
Iframes (<iframe>)
Why: Most email clients block interactive elements for security reasons. They will either be stripped out or cause your email to be flagged as spam.
Alternative Solutions:
<!-- ✅ Correct: Use linked tables for buttons -->
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" bgcolor="#0066cc" style="padding: 12px 24px; border-radius: 4px;">
<a href="https://yourwebsite.com/action" style="color: #ffffff; text-decoration: none; font-family: Arial, sans-serif; font-size: 16px;">
Take Action
</a>
</td>
</tr>
</table>
DO NOT declare styles directly on HTML built-in tags in <style> blocks.
Prohibited tags include: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, a
Why: These global style resets can conflict with the email editor's built-in styles and break the layout of other email blocks.
<!-- ❌ Incorrect Usage -->
<style>
div {
background: #FFFFFF;
}
p {
color: #000000;
}
</style>
<!-- ✅ Correct Usage: Use class selectors -->
<style>
.custom-background {
background: #FFFFFF;
}
.custom-text {
color: #000000;
}
</style>
<div class="custom-background">
<p class="custom-text">Your content here</p>
</div>