An HTML email is an email built with HTML and CSS, the same languages used for web pages, so it can contain a layout, colors, images, buttons and links. It is the opposite of a plain-text email, which contains text only. Almost every newsletter and marketing email is an HTML email, but coding one is different from coding a web page: email programs support only part of HTML and CSS, so emails rely on older techniques such as tables and inline styles.
HTML email vs plain-text email
| HTML email | Plain-text email | |
|---|---|---|
| Content | Layout, images, colors, buttons, fonts | Text and raw links only |
| Click and open tracking | Yes | Clicks only, with tracked links |
| Best for | Newsletters, promotions, product announcements | Personal-style messages, short notifications |
| Risks | Rendering differences between email programs, heavy images | Less visual impact |
Good practice is to send both in one message: an HTML version plus a plain-text version, called a multipart email. Email programs that cannot display HTML show the text version instead.
Why HTML emails are hard to code
Web browsers follow modern standards closely. Email programs do not: Outlook for Windows uses a Word-based rendering engine, Gmail removes some CSS, and mobile apps each have their own rules. A design that looks perfect in one inbox can break in another. That is why email developers follow a specific set of rules.
HTML email best practices
- Use tables for the layout. Flexbox and CSS grid are not reliably supported. Nested tables with fixed widths remain the safest way to build columns.
- Keep the width around 600 pixels. This fits most preview panes and scales well on mobile.
-
Inline your CSS. Some email programs ignore styles in the head of the email, so put the styles directly on each element with the
styleattribute. See what CSS means for email. - Design for mobile first. Use a single column, a large font and big buttons, and add media queries for smaller screens. See responsive email.
- Always add alt text to images. Many readers see the email before images load, so the alt text must carry the message. Never put your key message only in an image.
- Use web-safe fonts with fallbacks. Custom fonts do not load everywhere. See our guide to the best fonts for email.
- Make buttons with HTML, not images. A coded button stays visible and clickable even when images are blocked.
- Plan for dark mode. Check that your logo and text stay readable when the email program inverts colors. See dark mode email.
- Avoid JavaScript, forms and embedded video. Email programs block them. Link to a web page instead, or use an animated GIF.
- Keep the file light. Gmail clips messages whose HTML is larger than about 102 KB and hides the rest behind a "View entire message" link.
Can HTML emails include animation?
Yes, within limits. Animated GIFs work almost everywhere, except that some versions of Outlook show only the first frame, so make that first frame meaningful. CSS animations and interactive formats such as AMP for Email work only in some email programs, so always design a static version that still makes sense.
How to test an HTML email before sending
- Send test emails to the main inboxes your audience uses: Gmail, Outlook, Apple Mail, and on mobile.
- Turn images off and check that the email is still readable.
- Click every link and button.
- Check the plain-text version and the preheader text.
For a full list, use our HTML email QA checklist.
How to create HTML emails without coding
You do not need to write the code yourself. With a drag-and-drop editor, you build the email from blocks (text, images, buttons, columns) and the tool generates email-safe HTML for you. In Mailpro, you can:
- start from one of 600+ responsive email templates and adapt it with the drag-and-drop email builder;
- write or paste your own code in the HTML editor;
- import an existing HTML newsletter and send it as is.
HTML email FAQ
Are HTML emails more likely to go to spam? Not by themselves. Spam filters look at your sender reputation and authentication first. Problems come from broken code, emails that are one big image, or very little text compared with images.
Should I use HTML or plain text? HTML for newsletters and promotions, plain text for short personal messages. Sending both versions together is the safest choice.
What size should an HTML email be? Around 600 pixels wide, and under about 100 KB of HTML so Gmail does not clip it.
Read more about email marketing, or get ideas from our tips for making a great Easter newsletter.
Mailpro and HTML emails
Email-safe HTML, without writing the code
Build your emails with the drag-and-drop editor or 600+ responsive templates, or bring your own HTML. Mailpro is hosted in Switzerland and GDPR-compliant.
