Email template markup
The following article includes information about how standard HubSpot email templates are coded. 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. To make life easier, HubSpot email templates can either be created as user-friendly drag and drop templates or as coded files.
Drag and Drop email templates can either be responsive or basic. Responsive meaning it adapts to the viewport size, basic meaning it remains static.
By default they are responsive, but you can convert them to basic templates, by clicking "Responsive email template" in the inspector panel and choosing "Basic email template".
Designers have access to customize certain default colors and fonts (Settings > Marketing > Email) and adding inline CSS to modules (Module gear icon > Edit CSS) in drag and drop templates in the design manager.
You can always access the markup of a template layout by cloning to HTML (Actions > Clone to HTML). Coded templates allow you to completely customize the email markup, as long as you include the variables below.
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: 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.
When working with HubSpot's responsive layout, any <td> with a class that includes the text "column" will be made responsive.
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.
Thank you for your feedback, it means a lot to us.
This form is used for documentation feedback only. Learn how to get help with HubSpot.