Skip to main content

Supported products

Requires one of the following products or higher.

  • Marketing Hub -Professional

In this article, learn about how standard HubSpot email templates are coded. When building custom email templates, keep in mind that email clients only support certain HTML and CSS features. Because of this, coding email templates that render consistently across clients requires a fair amount of experience and patience.

Check out HubSpot's Knowledge Base to learn how to create template layouts in-app or how to save an existing email as a template.

In order to send emails with HubSpot, your templates must include certain information. See the required email HubL variables. When working with coded templates, you will also want to use modules to ensure email content can be easily edited on a per-email basis.

One challenging aspect of coding email templates that render correctly, across all clients, is the lack of support for CSS in a <style> within the <head>.

To make coding email templates easier, HubSpot coded email templates support a special style tag that gives designers the ability to write CSS that will be compiled and converted into inline CSS and will be added to the targeted elements. Any code added to a style tag with the ID of hs-inline-css, will be added to the targeted tags.

For example, Microsoft Outlook will apply a default font-family to all text contained in <td> tags, unless you specify a font-family inline for that table column. The example below uses a hs-inline-css style tag to add a font-family to all the table columns in the template. Please note that any media queries should be included in a separate <style>, as they can not be made inline.

Note that the data-hse-inline-css attribute on a <style> tag in the Edit > Edit Head section of drag and drop templates is in place of hs-inline-css to achieve this same goal. In coded files, either method may be used (as long as there is only one style#hs-inline-css per template). You may have multiple style[data-hs-inline-css="true"] elements.

HubSpot's default email template layout uses the markup below. These responsive layouts include media queries that make the images and tables responsive. The responsive layouts use color and font variables that connect to Settings > Marketing > Email.

Basic HubSpot template layouts use different markup and do not include the media queries that make the email responsive. The basic layouts also use color and font variables that connect to Settings > Marketing > Email.

When you start from scratch by creating a .html email in Design Manager, HubSpot will automatically generate the markup below.