Preparing your HTML

Modular Mail works with the HTML you already have. You don’t need a special framework or syntax. You do need to split each email design into a header, a footer and modules, so that any modules joined in any order still make a valid email.

How parts are joined

When Modular Mail builds an email, it joins the parts as they are, with nothing in between:

header HTML
module HTML      ← each module the marketer added, in their order
module HTML
footer HTML

That gives you one rule: the header opens everything the modules sit in, and the footer closes it.

What goes in the header

Everything from <!doctype html> to where the first module begins:

• <!doctype html>, <html> and the whole <head>, including <meta> tags, <style> blocks, media queries and dark mode rules.
• An empty <title></title>. Modular Mail puts the campaign’s subject there. If there’s no <title>, one is added before </head>.
• The opening <body> tag. The preheader goes in a hidden <div> just inside it, so the header must include <body>.
• Any wrapper tables that centre the email and set its width.
• Anything that appears at the top of every email, such as a view-in-browser link or the logo.

What goes in the footer

Everything after the last module, closing the tags the header opened:

• The legal text, address, social links and unsubscribe link.
• </table>, </td> and </tr> for each wrapper the header opened.
• </body> and </html>.

What makes a good module

A module is a fragment that sits inside the header’s wrapper. If your header ends inside a <table>, each module is usually one or more <tr> rows.

Good modules are:

• Self-contained. Every tag a module opens, it closes. A module should never depend on the module before or after it.
• Reusable. One module per kind of section: a hero, a text block, a two-column feature, a product card, a button, a divider, a banner. If two sections differ only in colour or layout, make one module with a choice rather than two modules.
• Named for marketers. “Product grid (3 across)” is clearer than “Module 7”.

A typical split

Here’s how a newsletter might break down:

Part	Contains
Header	Doctype, head and styles, body, wrapper tables, logo
Hero	Full-width image, headline, intro, button
Text	Optional heading, rich text body
Image with text	Image on one side, heading, text and link on the other
Product card	Image, title, price, button
Button	One centred or left-aligned button
Divider	A line with spacing
Footer	Social links, address, unsubscribe, closing tags

Before you start

Run through this list with your existing HTML:

• Inline your CSS. Many email clients ignore <style> blocks. Keep responsive media queries in the header’s <style>, but put base styles inline on elements.
• Use absolute image URLs. Images must be served over https from a public address, such as your CDN or the Modular Mail media library.
• Keep merge tags as they are. Tags such as {{ first_name }}, *|UNSUB|* and %%unsub_center_url%% pass straight through to the export. See Merge tags and personalisation.
• Keep technical code outside editable elements. Tracking pixels, Outlook conditional comments and ESP logic belong in the header, the footer or the unmarked parts of a module, where a marketer’s content can’t replace them.

Next step

With the HTML split up, mark the editable elements and add their fields.