This article covers best practices for working with HTML code blocks in the Keap™ email builder. Because email clients such as Outlook, Gmail, and Apple Mail render HTML and CSS inconsistently, following these guidelines helps improve compatibility, deliverability, and design consistency across clients. These best practices apply when using the HTML Block feature in the Keap email builder. For standard email content, Keap's built-in text and design tools handle cross-client compatibility automatically.

Use Inline CSS

Most email clients strip out or ignore <style> tags. Apply all styles inline on each element using the style attribute rather than embedding styles in a stylesheet.

<td style="font-size: 16px; color: #333333;">Hello World</td>

Use Table-Based Layouts

Use <table>-based layouts instead of CSS flexbox or grid. Flexbox and grid are not widely supported across email clients.

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center">Content</td>
  </tr>
</table>

Avoid External Resources

• External CSS stylesheets and JavaScript are blocked by most email clients. All styles must be applied inline.

• JavaScript must be avoided entirely — email clients will block it without exception.

Design for Mobile Responsiveness

Use fluid tables and media queries where supported. iOS Mail and Gmail support media queries, but support varies across clients. Including a viewport meta tag is recommended for mobile rendering.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Set Width, cellpadding, and cellspacing on Tables

• Set fixed widths on layout containers — 600px is a widely used standard email width.

• Use the cellpadding and cellspacing HTML attributes instead of CSS margin and padding where possible, as CSS spacing is less reliably supported.

Use Web-Safe Fonts With Fallbacks

Custom fonts are not reliably supported across email clients. Use web-safe fonts and always define a fallback font stack.

font-family: Arial, sans-serif;

Include Alt Text on All Images

Always include alt attributes on images. Alt text improves accessibility and ensures meaningful content is displayed when email clients block images by default.

Test Emails Before Sending

Always send test emails before scheduling or sending a broadcast. Testing in multiple clients — including Outlook, Gmail, and Apple Mail — helps identify rendering issues before the email reaches recipients.

Avoid Unsupported CSS Properties

The following CSS properties do not work reliably or at all in many email clients and should be avoided in HTML code blocks:

• position: absolute

• CSS animations

• Custom web fonts loaded via @font-face

• :hover pseudo-class interactions

Use Table Elements Instead of div for Layout

The <div> element does not render consistently in older email clients. Use <table>, <tr>, and <td> elements for all layout structures instead.

Use Built-In Email Builder Tools When Available

When using the HTML Block in the Keap email builder, cross-client compatibility becomes the responsibility of the person writing the HTML. The built-in Text Block and other native email builder tools handle cross-client compatibility automatically.

The HTML Block is best reserved for adding content or functionality that the built-in tools do not support — such as a custom iframe or custom CSS. Writing full email or page content in the HTML Block is not recommended. When a built-in tool is available for a given task, use the built-in tool to ensure consistent rendering across email clients.

Common Pitfalls to Avoid

• CSS frameworks such as Bootstrap — not supported in email clients.

• Embedded videos — use a static thumbnail image linked to the video URL instead.

• SVG images — not supported in Outlook desktop.

• CSS background images — use the inline background attribute on <td> or <table> elements instead of CSS background-image.

Frequently Asked Questions

What does this article cover?

This article covers best practices for writing HTML in the Keap email builder's HTML Block feature, including layout, CSS compatibility, fonts, images, and common pitfalls.

Why should div elements be avoided for layout in email HTML?

The <div> element is not reliably supported in older email clients, particularly older versions of Outlook. Table-based layouts using <table>, <tr>, and <td> provide the most consistent rendering across all major email clients.

When should the HTML Block be used instead of the built-in email builder tools?

The HTML Block is intended for adding functionality that the built-in tools do not support — such as embedding a custom iframe or applying custom CSS. For standard email content such as text, images, and buttons, the built-in tools are recommended because they handle cross-client compatibility automatically.