The data-mm attribute

data-mm is the only attribute Modular Mail adds to your HTML. It marks an element so a field can fill or change it.

<h1 data-mm="headline">Welcome to our summer sale</h1>

Syntax

data-mm="name"

Rule	Detail
First character	A letter, A–Z or a–z
Other characters	Letters, digits, - and _
Length	Up to 64 characters
Uniqueness	Unique within a part (the header, the footer or one module)
Case	Names are case sensitive: Headline and headline are different markers

Valid: headline, hero-image, cta_1, Button2. Not valid: 1st-heading, hero image, cta.link.

Where markers can go

A marker can go on any element that has a closing tag, plus <img>. The field type decides which elements suit it:

Field	Element
Text	Any element that holds text, with no markers inside it
Rich text	<td>, <th> or <div>
Image	<img>
Link	<a>
Colour, choice	Any marked element
Toggle (removes)	Any marked element
Repeater	Any marked element

One marker can be filled by only one content field (text, rich text, image, link or repeater). Several colours, choices and toggles can target the same marker.

Nesting

Markers can be nested. A toggle or colour can target an outer element while text fields fill the elements inside it:

<tr data-mm="button-row">
  <td data-mm="button-cell" bgcolor="#18181b">
    <a data-mm="button" href="https://example.com">Shop now</a>
  </td>
</tr>

Here a toggle could remove button-row, a colour could set button-cell’s background and a link field fills button.

A text or rich text field can’t go on an element with other markers inside it, since its content would replace them.

Inside repeaters

Markers inside a repeater’s element are filled per item, by the repeater’s own item fields. A field outside the repeater can’t fill a marker inside it, and an item field’s marker must be inside the repeater’s element.

What happens when the email is built

• Every data-mm attribute is removed.
• Each marked element’s opening tag is rewritten only as far as its fields need: attributes and style properties are set or replaced, and the rest are kept as you wrote them, quotes included.
• Everything between markers is copied exactly as written.

Where the subject and preheader go

You don’t mark these. Modular Mail finds them:

• Subject: the first <title> in the header. If there isn’t one, a <title> is added before </head>.
• Preheader: a hidden <div> added just inside <body>.