How can I use HTML in Letterhead?

The HTML block lets you insert custom HTML directly into your newsletter. Built-in validation keeps your email compatible with email clients: problematic inputs — like script tags and HTML5 media objects — are automatically identified and restricted, so custom code can’t break your layout or deliverability.

Add an HTML block

1. From Emails, open a draft (blank or from a template).
2. Drag the HTML block from the block panel to where you want it.
3. Click the block placeholder — the HTML editor opens on the right.
4. Enter your markup. Changes save automatically.

Build a template from your own HTML

Instead of assembling a reusable template block by block, you can write or paste the entire HTML yourself:

1. From Emails, click New template and choose Start from HTML.
2. Enter or paste your markup in the editor. The preview updates as you work.
3. Use merge tags (below) to pull in curated content or promotions at send time.
4. Save the template — it reopens in the same code view whenever you edit it later.

You can also choose Start from HTML when creating a one-off newsletter from scratch (not from a template).

Letterhead supported merge tags

You can use these merge tags inside your HTML:

• {{ campaignId }} — a unique identifier for the newsletter once published (empty before publication).
• {{ uniqueId }} — a unique identifier for the individual subscriber (empty before publication).
• {{ email }} — the subscriber’s email address (or {{ emailMD5 }} for an MD5 hash of it).
• {{ firstName }} — the subscriber’s first name, if set in their profile.
• {{ lastName }} — the subscriber’s last name, if set in their profile.

When building a template from HTML, you can also use content merge tags to pull in curated items or promotions. These fill with real content at send time.

Unsubscribe and view-in-browser links

Two more merge tags resolve to whole URLs rather than to a piece of subscriber data, so you drop them straight into an href in a template you write from HTML:

What it gives you	Merge tag
The unsubscribe link for this newsletter	{{ unsubscribe }}
A link to view this newsletter in a browser	{{ viewinbrowser }}

For example:

<a href="{{ unsubscribe }}">Unsubscribe</a> &middot;
<a href="{{ viewinbrowser }}">View in browser</a>

A few things worth knowing:

• Use the unsubscribe tag — don’t write the link by hand. {{ unsubscribe }} fills in the right link for the individual reader when the newsletter goes out, so each person unsubscribes themselves rather than someone else. If your newsletter sends through a third-party email service instead of Letterhead, the tag fills in that service’s own unsubscribe link, so the same markup works either way and you don’t have to remember which one you’re on.
• They’re for templates you write from HTML. A newsletter built in the composer gets its unsubscribe and view-in-browser links from the footer block instead — you don’t add either tag there.
• Capitals and spaces don’t matter. {{unsubscribe}}, {{ Unsubscribe }} and {{ unsubscribe }} all work.
• You’ll see the real links before you send. The preview and a test send fill both tags in, so you can click them and check.

Every newsletter needs a working unsubscribe link — it’s a legal requirement in most places, and leaving it out can get a send rejected outright. See what happens when someone unsubscribes.

For personalization elsewhere in your newsletter, see How do I personalize my newsletters? and audience profile fields.

Supported HTML elements and attributes

Element	Accepted attributes
<span>	id, class, style
<code>	id, class, style
<sub>, <sup>	id, class, style
<del>	id, class, title, style
<ins>	id, class, style
<small>	id, class, style
<font> (converts to <span>)	class, id, color, size, face, style
<a>	id, class, href, title, style
<em> / <i>	id, class, style
<strong> / <b>	id, class, style
<p>	id, class, style
<img />	class, id, src, alt, title, style, width, height
<table>	class, id, title, style, width
<tbody>, <thead>	class, id, style
<tr>	class, id, align, valign, style
<th>	class, id, colspan, rowspan, style, width, height
<td>	class, id, colspan, rowspan, valign, style, width, height
<h1>–<h6>	id, class, style
<br>	id, class, style
<ol>, <ul>, <li>	id, class, style
<dl>, <dt>, <dd>	id, class, style
<pre>	id, class, style
<u> (converts to <span>)	id, class, style
<s> (converts to <span>)	id, class, style

For styling without code, see How do I use the new design settings? For advanced email-wide styling, see Custom CSS in emails.