How to create an HTML email: 7 rules to keep it from breaking

An HTML email is an email whose layout, colors, fonts, images and buttons are written in HTML code. To keep it from breaking in Outlook or Gmail, you have to write it differently from a web page: a table-based layout around 600 pixels wide, styles directly on the elements, images with alt text, web safe fonts, code under 102 kB, coded buttons and always a test email. In Quanda, you add your own HTML with the Create email using HTML button and see a preview on the right straight away. If you would rather not write code, describe the email to an AI assistant connected to Quanda through the Quanda MCP server and have a finished campaign draft in a few minutes. Here you will find 7 rules, a code sample and both approaches.

Key takeaways

1. Classic Outlook for Windows renders emails with the Word engine and Microsoft will support it until at least 2029, which is why emails do not use flexbox or grid.
2. Build the layout with tables around 600 pixels wide and write styles directly on the elements.
3. Expect images to be blocked: use alt text, dimensions and buttons made with code, not images.
4. Gmail clips emails with code over 102 kB, including the footer and the unsubscribe link.
5. Always test an email from AI or another tool in several inboxes.
6. Without any coding experience, you can create an HTML email within a few minutes with an AI assistant through the Quanda MCP server. You describe the content, add images and the assistant does the rest.

In short: what an HTML email is, when it makes sense, what to watch out for and how to get it into Quanda

• What it is: an email whose content and look are written in HTML.
• When it makes sense: when you write the code yourself, move a finished template from another tool or have AI write it for you.
• What to watch out for: Outlook, Gmail and other email clients modify the code, so rules older than the modern web still apply.
• How to get it into Quanda: when creating a campaign, choose Create email using HTML and paste the code. For part of an email, use the HTML content component in the editor.

What is an HTML email

An HTML email is an email whose content and look are written in HTML, the same language used for web pages. That is why it can have a logo, colors, images, multiple columns and buttons. The opposite is a plain text email, which contains only letters without any formatting.

Most newsletters and marketing emails are HTML. The only difference is who writes the code. In the Quanda email editor, the editor creates it for you while you build the email from blocks. But if you write the code yourself or have it from somewhere else, you can add it to Quanda directly.

When your own HTML code makes sense

Your own HTML code makes sense mainly in three cases:

• You know how to write HTML emails yourself and want full control over every detail.
• You have a finished template from another tool, for example from Canva or from a previous email service, and just want to move it to Quanda.
• You have the code created with AI, for example in ChatGPT or Claude. The most convenient way is through the Quanda MCP server, where the assistant creates the email directly in Quanda.

In all of these cases, you just paste the code and see the result right away. If you need your own code for just part of the email, such as a table, you do not have to write the whole email. The Quanda email editor has a content component for HTML content that you place between the other blocks.

How to add HTML code to Quanda

Besides the classic editor, where you build the email from individual blocks, you can also create it with HTML code:

1. Create a new email campaign and continue to the email step.
2. On the template selection page, choose the Create email using HTML button.
3. Paste the email code into the left side of the screen. On the right, you immediately see a preview of how the email will look before you send it.
4. Fill in the email subject line above the code.
5. Add an unsubscribe link with the {{ unsubscribe_link }} tag to the footer. Without it, the HTML email is not complete in Quanda.
6. In the Sending step, send a test email to several inboxes.

Sending a test is described in the help article Setting up mailing in a simple campaign. You can also add personalization tags to the code, such as a greeting. They are written in double curly braces with spaces inside, and when sending, Quanda replaces them with each recipient's details.

Why an HTML email does not look the same as a web page

It is worth pausing here for a moment, because this is the most common source of disappointment. Code that looks perfect on the web or in a browser often falls apart in an inbox. Gmail, Outlook, Yahoo and others each interpret the code a little differently, and classic Outlook for Windows even displays emails using the technology Word uses to write documents. That is why emails still rely on techniques that ordinary web pages abandoned long ago.

Sources: Can I email (HTML and CSS support in email clients); Microsoft, New Outlook for Windows: A Guide to Product Availability (2024); Litmus, Email Client Market Share: Trends & Statistics 2026 (data for July 2026); the Quanda guide to HTML emails. As of October 2026.

According to its announcement, Microsoft will support classic Outlook in Microsoft 365 until at least 2029, while the new Outlook already renders emails like a web browser. Business recipients keep using classic Outlook, though, so your email has to work in both.

7 rules for writing an HTML email

1. Build the layout with tables

It sounds old fashioned, but tables (the <table> tag) are the only layout method that every single email client displays reliably. More modern techniques commonly used on the web often fail in email, especially in older Outlook. Keep the email width around 600 pixels, at most 700 pixels. That is a safe size that fits the preview pane in every email client.

Add the role="presentation" attribute to layout tables. Screen readers then skip the table instead of reading it out as data.

2. Write styles directly on the elements

Write styles, that is colors, font size and spacing, directly on the text or image. If you write a style only once at the top of the code and then refer to it in the text, some email clients either ignore it completely or respect it only halfway. It is safer to write the style with the style attribute exactly where it is used, on the specific text or button. This is called inline styles, or inline CSS. The head should only contain what cannot be written any other way, such as rules for mobile (responsive display) and dark mode.

3. Expect that images may not be displayed

Many email clients block images by default. So always add a description (alt text) to every image and set its dimensions in advance, so the layout of the email does not shift while it loads. The text should make sense even if no image is displayed. How to turn alt text into a striking headline is explained in the article Can't see images in an email? Styled alt text shows a headline.

Use JPG for photos, PNG for logos and icons and GIF for simple animations. Classic Outlook does not display WebP and SVG, and the differences between the formats are explained in the article JPG, PNG or GIF? Which image file type to use for email marketing.

4. Use common, web safe fonts

Decorative fonts downloaded from elsewhere do not show up at all in Outlook and Gmail. Always specify fallback fonts in the code too, such as Arial or Helvetica, so the email looks good even if the main font does not load. The notation then looks like this: font-family: Arial, Helvetica, sans-serif.

5. Do not make the email unnecessarily heavy

If the email code is too long (over 102 kB), Gmail clips it and the recipient sees only a link to view the entire message. Your main message or button may then never be seen. The footer with the unsubscribe link ends up hidden too. So keep the code as simple as possible, without needlessly repeated styles. Only the code counts towards the limit, not images, which load separately. Google does not publish the limit officially, 102 kB is reported based on measurements by email testing tools and email service providers. The SPAM test in Quanda checks the same limit.

6. Make buttons as text with a background color, not as images

A button made as an image may not show up at all when images are blocked. It is safer to make the button an ordinary link with a background color set directly in the code. On a phone, it should be big enough for a finger, at least 44 × 44 pixels. This size is recommended by the WCAG 2.2 accessibility guidelines (criterion 2.5.5) and by Quanda's HTML email guide.

7. Always send yourself a test email before sending

The preview in the editor is a good first step, but it does not replace sending the email to yourself in Gmail, Outlook or Yahoo and checking how it looks. Also check how it looks on a phone and in dark mode. According to Litmus (Email Client Market Share: Trends & Statistics 2026, over 1 billion opens in July 2026), more than a quarter of users use dark mode.

Tip: Send the test email to at least three addresses: Gmail, your company Outlook and Yahoo. Open it on a computer and on a phone, and switch the phone to dark mode once. That way you catch most errors before your recipients see them.

Sample HTML email skeleton

This is what a simple skeleton that follows the rules above looks like: a table for the layout, a width of 600 pixels, styles directly on the elements, a web safe font, a coded button and an unsubscribe link.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f3f3f3">
  <tr>
    <td align="center" style="padding: 24px 0;">
      <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
        <tr>
          <td style="padding: 32px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 26px; color: #333333;">
            <h1 style="margin: 0 0 16px; font-size: 28px; line-height: 34px;">News</h1>
            <p style="margin: 0 0 24px;">A short text that says why to open the email.</p>
            <a href="https://www.example.com" style="display: inline-block; padding: 14px 28px; background-color: #0b5cad; color: #ffffff; text-decoration: none; border-radius: 4px;">Learn more</a>
          </td>
        </tr>
        <tr>
          <td style="padding: 16px 32px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #777777;">
            Don't want to receive more emails? <a href="{{ unsubscribe_link }}" style="color: #777777;">Unsubscribe</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

The sample is simplified. A full email also has a head with the encoding and Outlook settings, rules for mobile and dark mode and buttons adjusted to keep their padding in Outlook.

Moving HTML from other tools or creating it with AI?

Even when you have AI create the email or move it from another tool, such as Canva, the result is often not perfect on the first try. Even if you try to follow the rules above, something can still break in one email client or another, because keeping track of every exception by hand is hard even for experienced email developers.

So if you have the HTML code created elsewhere and then paste it into Quanda, always send test emails to several inboxes and check that it displays the way it should.

When AI writes the code, a specific prompt helps. State that it is an HTML email, not a web page, and list the rules: a table-based layout 600 pixels wide, styles directly on the elements, no flexbox or JavaScript, web safe fonts with a fallback, JPG or PNG images with alt text, coded buttons and an unsubscribe link with the {{ unsubscribe_link }} tag in the footer.

An AI assistant connected to Quanda takes care of all of this for you, as the next section shows.

How to create an HTML email with AI via the Quanda MCP server

The Quanda MCP server is a connection through which an AI assistant such as Claude, ChatGPT or Copilot works directly with your Quanda account. For HTML emails, this means the assistant does not just write the code, it writes it following the Quanda guide to HTML emails, creates the campaign itself and sends you a test email. That way you can prepare your own HTML email safely and reliably within a few minutes, without any coding experience.

1. Connect your AI assistant to Quanda through the Quanda MCP server. Setup takes about 5 minutes and you only do it once.
2. In the chat, describe what the campaign should contain: what the email is about, who it is for, what the main message is and where the button should lead.
3. Add links to images (for example from your website) or attach images directly to your prompt. If you add your website address, the assistant also picks up your colors and logo from it.
4. The assistant writes the HTML, creates the campaign as a draft and sends you a test email.
5. Describe changes in a plain sentence, for example "shorten the intro and make the button bigger", and a new test arrives.
6. You choose the recipients and send the campaign yourself in Quanda.

A prompt can look like this: "Prepare an email for our customers about our spring bike service. 20 % off until the end of April, the Book a service button should lead to our service page. Use the colors and logo from our website and these two photos." Nothing more is needed.

You do not have to worry about images. Quanda hosts them itself. When the campaign is saved, it downloads images from links and stores them, and images attached to your prompt are uploaded by the assistant to the image library. If your assistant cannot do that, you upload them on the Images page in the Quanda MCP web app and send it the address.

It is reliable because the assistant follows the same rules as this article: tables, buttons that work in Outlook too, mobile display, dark mode, images with alt text, personalization tags and the mandatory unsubscribe link. It is safe because the campaign is only created as a draft, sending stays up to you and you can revoke the assistant's access at any time.

Creating a beautiful, working HTML email with AI is fun and truly anyone can do it. Instead of code, you only think about what you want to tell your customers.

Tip: How to connect the assistant, which AI assistants the Quanda MCP server supports and what else it can do, such as campaign analyses and reports, is described on the Quanda MCP server page.

Email editor, your own HTML code or an AI assistant

Both the email editor and the assistant via the Quanda MCP server follow Quanda's rules, so the resulting email works reliably across Gmail, Outlook, Yahoo and other clients. With code from a general AI chat or another tool, on the other hand, you rely on it happening to get every detail right. Working in the editor is described in the help article E-mail editor of a simple e-mail campaign.

Checklist before sending an HTML email

Before you send a campaign with your own HTML code, go through this list:

• The layout is built with tables with the role="presentation" attribute, not with flexbox or grid.
• The email is around 600 pixels wide, at most 700 pixels.
• Styles are written directly on the elements.
• Every image has alt text and dimensions and is in JPG, PNG or GIF format.
• The font has a fallback, for example Arial, Helvetica, sans-serif.
• The code is smaller than 102 kB.
• Buttons are made with code, not images.
• The footer contains an unsubscribe link with the {{ unsubscribe_link }} tag, without it the email is not complete.
• You have checked the test email in Gmail, Outlook and Yahoo, on a phone and in dark mode.

Conclusion

Your own HTML code gives you freedom, but also responsibility for how recipients see the email in dozens of different programs. Stick to the seven rules, keep the code simple and test every email. If you would rather not write code, have an AI assistant prepare the HTML email in a few minutes through the Quanda MCP server. And if you want to put every block together yourself, reach for the Quanda email editor and add your own code only where it is really needed.

If you want to dive deeper into email design, take the free online course Email Copywriting and Design That Gets Read. And if you are not sure whether your HTML email will hold up in every inbox, get in touch with us. We will go through it with you, free of charge, and tell you what to change.