Anatomy of the boilerplate HTML

Creating a new "HTML & HUBL" email template comes with some boilerplate HTML to get you started. 

1) Head: Some meta-data and a place for your CSS. 

2) Body: The actual rendered content of your email template. 

3) Super helpful comment of where someone should copy + paste their email content assuming the only thing they are copying and pasting is just their content and not their head + footer. This is never the case. 

4) The boilerplate also comes with a footer which includes the token to show their Company info from settings and the manage subscription links. The email template they are migration most likely has it's own footer with this information. They will need to replace the Company info + Unsub links in their template with the tokens located here. 

HTML  elements frequently come in pairs, with a start tag and an end tag with some content in between. 

Making it editable 1: The Content Attribute

The bare minimum you need to do to go from hard-coded email content to something editable in the email tool is to create your first module. 

Welcome to content_attribute

HubL lets you define editable modules. A common 'low effort' version of this is to wrap the actual content of your email - not including your logo and footer - in content_attribute. 

Everything inside the tags is loaded into the editor as the default content you start with. 

Nested Tables: Understanding the layout

What the hell am I looking at?

HTML email templates are typically structured as tables within tables. This is a rough sketch of the layout of the Product Announcement email template layout. 

Tables start with the <table> tag. 

Each table has at least one row: <tr>

Each row has at least one cell: <td>

If a row has more than one column in it, that would be an additional <td> tag. 

Once you get to the cell, the layout then contains another table, with it's own row and table. 

Welcome to the wonderful world of email template layouts.