Salesforce Email HTML Code: Build, Customize, and Send Formatted Emails That Actually Render

This guide covers every HTML path in Salesforce—Classic templates, Lightning's HTML field, Apex setHtmlBody, inline CSS rules, size limits, and the rendering constraints that make email HTML a different discipline from web HTML.

Writing HTML for Salesforce emails is not the same as writing HTML for the web. Email clients strip head-level stylesheets, ignore modern CSS properties, and render the same code differently across Gmail, Outlook, and Apple Mail. Salesforce adds its own layer of complexity with HTML sanitization, body size limits, and template types that each handle raw code differently. Custom HTML templates in Classic give you full markup control but require inline CSS for cross-client compatibility. Lightning templates provide an HTML Value field for direct code entry alongside the drag-and-drop builder. In Apex, the setHtmlBody method on SingleEmailMessage lets you send programmatic HTML emails. This guide covers every method for working with HTML code in Salesforce emails, the rendering rules that govern how that code actually displays, and how to build professional HTML emails without the fragmentation. For a complete overview of Salesforce email functionality, see the Salesforce email glossary.

Custom HTML Templates in Classic: Full Markup Control

Classic email templates include a Custom HTML type (without Letterhead) that accepts raw HTML and CSS in a code editor. Navigate to Setup → Classic Email Templates → New Template → Custom (without using Classic Letterhead). The editor provides a text area where you paste or write complete HTML, including doctype, head, body, tables, and inline styles. This is Salesforce’s most flexible native option for HTML email code—you control the entire document structure. The Salesforce HTML template tips guide covers supported tags and best practices for Classic HTML templates.

The HTML with Letterhead variant provides a structured framework with predefined header and footer sections, restricting where custom code can appear. Custom HTML templates remove these constraints entirely but require more HTML knowledge. Both types support Salesforce Merge Language ({!Contact.FirstName}) for personalization. The HTML body field has a 384 KB size limit in Classic—enough for most emails, but a constraint for templates with large embedded images or complex tables. For guidance on building email templates across all types, see the step-by-step guide.

Lightning Templates: HTML Value Field and Builder Hybrid

Lightning Email Templates offer two paths for HTML code. The drag-and-drop builder generates HTML automatically from visual components—no coding required. But if you need custom code, the HTML Value field on the template record accepts raw HTML directly. Save the template first, then populate the HTML Value field with your markup. This approach bypasses the builder entirely and gives you direct control over the rendered output. Lightning templates use Handlebars Merge Language ({{{Recipient.Name}}}) rather than Classic merge syntax, so existing Classic HTML cannot simply be pasted in. For a complete comparison, see the Lightning email templates glossary entry.

The Lightning builder also supports an HTML component that can be dragged into the template canvas alongside rich text and image blocks. This allows mixing visual drag-and-drop design with custom HTML sections—useful for embedding interactive elements or custom styling that the standard components don’t support. However, Salesforce applies HTML sanitization that may strip certain tags, attributes, or CSS properties it considers unsafe. Always test after saving to confirm your code survived sanitization intact. The builder also cannot import Classic HTML templates directly—migration requires visual recreation or direct HTML Value population.

Inline CSS and Cross-Client Rendering Rules

Most email clients strip or ignore CSS defined in the head section or in external stylesheets. Gmail removes the entire style block. Outlook uses the Word rendering engine and ignores CSS properties like float, max-width, and margin auto. Apple Mail handles responsive media queries but most other clients do not. The universal rule for Salesforce email HTML is: use inline styles on every element. Write style attributes directly on each HTML tag (style="font-family: Arial; font-size: 14px; color: #333;") rather than relying on class selectors or embedded stylesheets.

Table-based layouts remain the most reliable structure for HTML emails because they render consistently across Outlook, Gmail, Yahoo, and mobile clients. Use HTML tables for layout structure, set explicit widths in pixels (not percentages for Outlook), include cellpadding, cellspacing, and border attributes directly on table elements, and always provide a plain-text fallback version. Avoid JavaScript entirely—every email client strips it. For deliverability best practices, including HTML tips that improve inbox placement, see the dedicated entry.

Apex setHtmlBody: Programmatic HTML Emails

In Apex, the SingleEmailMessage class provides setHtmlBody(String htmlBody) to define HTML email content programmatically. You can construct HTML dynamically using string concatenation, reference fields from SOQL queries, and build fully personalized email bodies without a stored template. Alternatively, use Messaging.renderStoredEmailTemplate to resolve merge fields from an existing template and then modify the rendered HTML via getHtmlBody() before sending. Both approaches count against daily email limits.

Always pair setHtmlBody with setPlainTextBody to provide a text-only fallback—emails without a plain-text version are more likely to trigger spam filters. The Apex HTML body supports the same inline CSS rules as templates since the rendering target is the recipient’s email client, not the Salesforce UI. For complex HTML email logic—conditional sections based on record data, dynamic tables from related lists, or multi-language content—Visualforce email templates offer an alternative with access to standard controllers and cross-object merge capabilities through custom Visualforce stylesheets.

HTML Body Size Limits and Common Pitfalls

Salesforce enforces different HTML body size limits depending on the sending method. Classic email templates allow up to 384 KB for the HTML body field. Lightning individual emails composed from record pages have a lower character limit than Classic. Apex setHtmlBody accepts large strings, but the overall email size (body + attachments) cannot exceed 25 MB. Emails that exceed the HTML body limit throw a “data value too large” error and fail to send. Large HTML bodies typically result from base64-encoded inline images—always host images externally and reference them via HTTPS URLs instead of embedding them.

Other common pitfalls include using CSS shorthand properties that Outlook ignores (use border-left-width instead of border shorthand), relying on background images (Outlook won’t display them), using web fonts (stick to Arial, Helvetica, Georgia, Times New Roman), and forgetting the DOCTYPE declaration (use XHTML 1.0 Transitional for widest compatibility). For teams managing HTML across dozens of email campaigns, maintaining consistent code quality without a centralized design system becomes a major operational burden.

Scalable HTML Email Design with Native Salesforce Tools

MassMailer’s drag-and-drop email template builder eliminates the tradeoff between design control and HTML complexity. The WYSIWYG editor produces clean, mobile-responsive HTML automatically while still supporting custom HTML code blocks for teams that need granular control. Drag in text, images, buttons, and social links visually, then add an HTML Block component anywhere in the layout to inject custom markup. MassMailer stores templates natively in Salesforce and ensures consistent rendering across devices.

For organizations managing branded HTML emails at scale, MassMailer provides reusable content blocks, dynamic merge field personalization, and the Email Monitor for cross-client rendering previews, spam scoring, and link validation—all before a single email is sent. Because MassMailer is 100% native to Salesforce, every template respects the same CRM permissions, tracking, and audit capabilities as all other Salesforce data. No external HTML editors, no middleware, no rendering surprises.

Your HTML emails deserve better than copy-paste and pray. MassMailer gives you visual design plus custom HTML blocks, cross-client previews, and responsive rendering—all native to Salesforce. Schedule a live demo and see it in action.

Key Takeaways

  • Custom HTML templates in Classic provide full markup control with a 384 KB body limit; HTML with Letterhead restricts code to predefined sections.
  • Lightning templates accept raw HTML via the HTML Value field or through HTML components in the drag-and-drop builder—but Salesforce sanitization may strip certain tags.
  • Inline CSS is mandatory for cross-client compatibility; Gmail strips head-level styles and Outlook ignores modern CSS properties like float and max-width.
  • Apex setHtmlBody sends programmatic HTML emails; always pair with setPlainTextBody to avoid spam filter penalties.
  • Table-based layouts render most consistently across email clients; avoid JavaScript, web fonts, CSS shorthand, and base64-embedded images.
  • MassMailer combines visual drag-and-drop design with custom HTML code blocks, cross-client preview, and mobile-responsive output—all inside Salesforce.