The adoption of HTML for personal and business emails has only grown over time, with most modern email clients supporting HTML by default. HTML emails enable senders to go beyond plain text — adding layouts, colors, images, and calls-to-action that make messages more impactful.
This article explores what makes HTML emails unique, how they differ from plain-text emails, and the essential practices for creating HTML emails. From coding basics and email design principles to tools, templates, and deliverability tips, you’ll learn how to craft effective HTML emails that look good, perform well across devices, and reach your audience’s inbox.
Key takeaways
- HTML emails vs. plain-text emails: HTML emails allow for branding, design, interactivity, and tracking; however, they face rendering limitations and higher spam risks. In contrast, plain-text emails are simple, personal, and highly deliverable.
- Best practices for building HTML emails: Use tables for layouts, inline CSS for styling, responsive design techniques, accessible text (with alt text and color contrast), and always include a plain-text version for better deliverability.
- Deliverability and optimization matter: Clean, lightweight code, a balanced text-to-image ratio, cautious wording, optimized images, and thorough testing across clients and devices are critical to ensure emails reach inboxes.
What is an HTML email?
An HTML email is an email composed using hypertext markup language (HTML) — the same language that is used to create webpages. HTML emails allow you to add visual elements, formatting, and limited interactivity to your message, thereby enhancing its impact and presentation.
The basic structure of an HTML email
HTML emails have a defined structure that ensures they display correctly across different email clients. The following are typical components:
- DOCTYPE declaration and <html> tags define the structure of the email and tell the email client that the content is written in HTML;
- head section: Contains metadata, such as the email title, character encoding, and, occasionally, embedded CSS styles;
- body section: Makes the content visible to recipients, including text, images, links, and buttons;
- tables for layout: Unlike modern webpages that use divs and CSS layouts, HTML emails often rely on tables to ensure compatibility with older and restrictive email clients;
- inline CSS styling: Since many email clients strip out external CSS files, most styling is applied inline to each element.
HTML emails vs. webpages: Similar language, different rules
Both webpages and HTML emails use HTML and CSS, but they behave differently because of the environments in which they are displayed.
Webpages are rendered in web browsers (such as Chrome, Firefox, or Safari) that fully support modern CSS, JavaScript, responsive layouts, and interactive features.
HTML emails are rendered in email clients (Gmail, Outlook, Apple Mail, etc.). Each client has its own rendering engine, and many strip out or ignore certain CSS rules and interactive elements. For example:
- Outlook ignores external stylesheets; even embedded CSS is inconsistently applied because of the Word rendering engine;
- Gmail doesn’t support external stylesheets linked via <link> tags;
- Gmail removes your entire <style> block if it encounters an error;
- certain email clients block images or certain fonts by default.
Because of these limitations, HTML emails rely heavily on specific coding practices:
- tables for layout instead of modern CSS grids;
- inline styles to ensure appropriate rendering;
- well-tested HTML/CSS techniques to maintain compatibility across hundreds of clients.
HTML emails vs. plain-text emails
Beyond the technical structure of HTML emails, it’s also critical to understand how they compare with plain-text emails. The two formats have different advantages and are each suited for different types of communication.
HTML emails
HTML emails can include design elements such as images, buttons, styled text, and structured layouts. Such emails make messages visually appealing and help reinforce brand recognition. In addition, they enable the tracking of opens and clicks, thus providing valuable insights into audience engagement.
Common use cases for HTML emails:
- marketing campaigns: Newsletters, product announcements, and promotions;
- transactional emails: Order confirmations, shipping updates, and password resets.
Plain-text emails
Plain-text emails contain only text. They don’t include images, videos, or buttons: essentially, they look like the text you would create in a simple editor such as Notepad. Plain-text emails typically have high deliverability and are less likely to trigger spam filters since they don’t include code that could be flagged as suspicious. We’ll cover deliverability in more detail later in this article.
Common use cases for plain-text emails:
- personal communication;
- sales outreach;
- backup version for HTML emails.
|
HTML email |
Plain-text email |
|
|
Appearance |
Rich design with colors, fonts, images, and layout |
Simple text, no styling or images |
|
Perceived personal touch |
More polished, but can feel less personal |
Feels personal and authentic, like a direct message |
|
Design and branding |
Strong branding and visual identity are possible |
No branding or design elements |
|
Interactivity |
Supports buttons, images, GIFs, and limited CSS interactivity |
No interactivity |
|
Analytics and tracking |
Supports open-rate and click tracking |
No open/click tracking |
|
Deliverability |
Higher spam risk if the code is messy or if images are overused |
High deliverability, less likely to trigger spam filters |
|
Accessibility |
Varies by client; some block images or styles by default |
Highly accessible across all devices and clients |
|
Use cases |
Newsletters, promotions, transactional emails, event invitations |
Sales outreach, personal updates, fallback version |
How to create an HTML email
From planning your message to coding, designing, and writing compelling content, this section walks you through each step of creating HTML emails that look great, read well, and encourage recipients to take action.
1. Planning: Define the goals, audience, and message
Before you begin designing or coding for your email, decide what you want the email to achieve — whether it’s driving a purchase, promoting new content, or encouraging clients to leave a review. Once you’ve set a clear goal, identify the audience segment you’re targeting and what value your message brings them. Finally, outline the core message and call to action so the rest of the design and content support that single objective.
2. Coding HTML emails
In this section, we’ll walk you through the core coding principles of HTML emails, from basic structure and layouts to styling and accessibility.
Basic HTML structure for emails
An HTML email consists of several essential building blocks. Let’s look at them step by step:
1. DOCTYPE and HTML tag
Every HTML email begins with a DOCTYPE declaration and the opening <html> tag. This ensures the document is recognized as HTML.
<!DOCTYPE html>
<html lang="en">
2. Head section
The <head> contains meta information and embedded CSS. This is where you define the character encoding, the email’s title, and any media queries. Media queries enable email layouts to adapt to smaller screens.
<head>
<meta charset="UTF-8">
<title>Welcome Email</title>
<style type="text/css">
/* Media queries for responsive design */
@media only screen and (max-width:600px) {
table[class="container"] {
width: 100% !important;
}
td[class="content"] {
padding: 10px !important;
font-size: 14px !important;
}
img[class="responsive-img"] {
width: 100% !important;
height: auto !important;
}
}
</style>
</head>
3. Body wrapper
The <body> tag holds all visible content of the email. Best practice is to set a background color and reset margins for a consistent appearance across clients.
<body style="margin:0; padding:0; background-color:#f8f8f8;">
4. Preheader text
The preheader appears in inbox previews immediately after the subject line. It’s included at the top of the email but hidden visually with inline CSS.
<span style="display:none; font-size:0; color:#ffffff; line-height:0; max-height:0; max-width:0; opacity:0; overflow:hidden;">
Welcome to our newsletter! Stay tuned for updates and special offers.
</span>
5. Main table container
Instead of <div> for layout, HTML emails rely on tables for consistent rendering. A centered wrapper table defines the email’s width, and nested tables structure the content.
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#f8f8f8">
<tr>
<td align="center">
<table width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" class="container">
<tr>
<td style="padding:20px;" class="content">
<!-- Email content goes here -->
</td>
</tr>
</table>
</td>
</tr>
</table>
6. Inline styles
Certain email clients strip out <style> blocks; thus, critical styling (fonts, colors, and padding) is applied inline on each element to ensure appropriate rendering.
<h1 style="font-family: Arial, sans-serif; font-size:24px; color:#333333; margin:0 0 20px 0;">
Welcome to our service!
</h1>
Here’s a full minimal HTML email template that incorporates all the elements we’ve discussed:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome Email</title>
<style type="text/css">
/* Media queries for responsive design */
@media only screen and (max-width:600px) {
table[class="container"] {
width: 100% !important;
}
td[class="content"] {
padding: 10px !important;
font-size: 14px !important;
}
img[class="responsive-img"] {
width: 100% !important;
height: auto !important;
}
}
</style>
</head>
<body style="margin:0; padding:0; background-color:#f8f8f8;">
<!-- Preheader text -->
<span style="display:none; font-size:0; color:#ffffff; line-height:0; max-height:0; max-width:0; opacity:0; overflow:hidden;">
Welcome to our newsletter! Stay tuned for updates and special offers.
</span>
<!-- Main wrapper table -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#f8f8f8">
<tr>
<td align="center">
<!-- Inner container table -->
<table width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" class="container">
<tr>
<td style="padding:20px;" class="content">
<!-- Header -->
<h1 style="font-family: Arial, sans-serif; font-size:24px; color:#333333; margin:0 0 20px 0;">
Welcome to our service!
</h1>
<!-- Body text -->
<p style="font-family: Arial, sans-serif; font-size:16px; color:#333333; line-height:1.5; margin:0 0 20px 0;">
Thank you for signing up. We're excited to have you on board. Here’s a quick overview of what you can expect.
</p>
<!-- Call-to-action button -->
<table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 0 auto;">
<tr>
<td align="center" bgcolor="#007BFF" style="border-radius:5px;">
<a href="https://website.com" target="_blank"
style="display:inline-block; padding:12px 25px; font-family: Arial, sans-serif; font-size:16px; color:#ffffff; text-decoration:none; border-radius:5px;">
Get Started
</a>
</td>
</tr>
</table>
<!-- Footer -->
<p style="font-family: Arial, sans-serif; font-size:12px; color:#999999; line-height:1.5; margin:20px 0 0 0; text-align:center;">
You are receiving this email because you signed up for our service. If you wish to unsubscribe, click here.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Table-based layouts
Tables are the backbone of HTML email layouts. While a wrapper table sets the overall width, nested tables are used to organize content into sections, columns, and spacing blocks. This approach ensures consistent rendering across email clients, including those with limited CSS support.
Below is an example of a two-column layout that stacks vertically on screens that are narrower than 600px:
<!-- Two-column responsive section -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- Left column -->
<td class="column" width="50%" style="padding:10px; vertical-align:top;">
<h2 style="font-family: Arial, sans-serif; font-size:18px; color:#333333; margin:0 0 10px 0;">Feature One</h2>
<p style="font-family: Arial, sans-serif; font-size:14px; color:#555555; margin:0;">
Description of the first feature goes here.
</p>
</td>
<!-- Right column -->
<td class="column" width="50%" style="padding:10px; vertical-align:top;">
<h2 style="font-family: Arial, sans-serif; font-size:18px; color:#333333; margin:0 0 10px 0;">Feature Two</h2>
<p style="font-family: Arial, sans-serif; font-size:14px; color:#555555; margin:0;">
Description of the second feature goes here.
</p>
</td>
</tr>
</table>
<!-- Responsive stacking for mobile -->
<style type="text/css">
@media only screen and (max-width:600px) {
td.column {
display: block !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
</style>
This approach can be extended to create multicolumn layouts, image-and-text blocks, or feature grids, all of which remain responsive for mobile users.
Email-safe styling tips
To ensure your HTML emails display correctly in different email clients, follow these email-safe styling practices:
- fonts: Stick to web-safe fonts such as Arial, Helvetica, Georgia, or fallback stacks;
- colors: Use inline color and background-color attributes;
- padding and spacing: Apply directly to <td> cells rather than relying solely on CSS margins;
- images: Include width, height, and alt attributes inline to guarantee accurate rendering.
3. Designing HTML emails
Good design helps your emails appear professional and make them readable. Below are a few key tips to consider when planning layouts, accessibility, and branding — it is not an exhaustive list, but a practical starting point for creating effective HTML emails.
Single-column vs. multicolumn layouts
Single-column layouts are ideal for mobile-first design because they naturally stack and are easy to read on small screens. Multicolumn layouts can work well on desktop, but require the careful use of media queries so that columns stack correctly on mobile screens. Selecting the appropriate layout ensures your content is both readable and visually balanced across devices.
Accessibility
Certain email clients block visual content by default to protect users (e.g., Outlook, older Gmail versions, Apple Mail with Mail Privacy Protection), which implies that images won’t load until you click “Display images.” This can make your email difficult to read if key information is embedded in images. To improve accessibility, always include descriptive alt text and ensure the core message is in live text, not baked into an image.
In addition, ensure your text has sufficient color contrast against backgrounds so it remains readable even if visuals are limited.
Branding and visuals
Use your brand’s colors, fonts, and logos consistently to reinforce recognition. Include images, icons, or subtle graphics to enhance the visual appeal, but avoid overwhelming the message — the email should remain scannable and easy to understand. Ensure there is a balance between visuals and text to maintain clarity and accessibility.
4. Writing HTML emails
Drafting the right words is just as important as creating the design of your email. This section covers how to write subject lines, body copy, and calls to action that capture attention, clearly communicate your message, and encourage readers to take action.
Clear subject lines and preheaders
Your subject line is the first thing recipients see; thus, it’s important to make it concise, relevant, and enticing, without being overly sensational. Pair it with a preheader — the short snippet that appears next to the subject line in the inbox — to provide additional context. Consider A/B testing different subject lines and preheaders to see which versions get higher open rates.
Scannable copy
Most recipients skim emails rather than reading every word. Use short paragraphs, bullet points, and subheadings to make your content easy to scan. Keep sentences simple and highlight key information with bold text sparingly.
Effective CTAs
Your CTA should be clear and actionable. Use buttons or links that stand out visually and place them strategically so recipients can easily complete the desired action. Keep the wording direct, such as “View offer,” “Confirm your order,” or “Download the guide.” Test different CTA texts, colors, and placements to see which combination leads to the most clicks.
Tools and frameworks for building HTML emails
Developing an HTML email demands both technical skills and substantial manual work, particularly when dealing with the many rendering quirks across different email clients. Fortunately, there are tools and frameworks that simplify both the design and testing processes.
No-code editors
If you don’t have the time or find hand-coding HTML too demanding, modern drag-n-drop editors let you create professional emails with the polish of a developer-built template:
- Stripo offers customizable templates, drag-n-drop blocks, and an HTML code editor. It automatically optimizes exported HTML for compatibility;
- Unlayer is a drag-n-drop email editor that can be directly embedded into SaaS platforms or CRMs;
- Mailchimp, Campaign Monitor, and Yespo are email marketing platforms with built-in visual editors.
These tools handle much of the heavy lifting, such as inlining CSS and using table-based layouts for maximum client support.
Testing tools
Even the best-designed HTML email can render differently in Outlook, Gmail, or Apple Mail. Testing platforms show you how your email will appear in dozens of clients before you hit “send”:
- Email on Acid provides previews on more than 100 of the latest devices and clients, including dark mode. It also offers troubleshooting tools, accessibility checks, and full integration with the Stripo editor;
- Litmus is a testing tool that previews your email in more than 100 email clients and devices. It also provides analytics and spam testing.
Many email service providers, such as Mailchimp and SendGrid, also provide built-in previews and device testing. These features are helpful but typically not as thorough as those provided by dedicated testing tools.
Responsive HTML email templates
Due to changes in image-caching technology, recent email marketing stats no longer report the exact share of email opens on mobile devices. The last time such reporting was done was in 2021, when mobile users accounted for 41.6% of all email opens.
Given that a large proportion of email opens occur on mobile devices, designing responsive emails is essential.
Here are a few examples of commonly employed responsive templates that you can use immediately or customize to your needs using Stripo’s drag-n-drop builder.
Order confirmation: Provides customers with immediate acknowledgment of their purchase, including essential details such as order number and estimated delivery time.
(Source: Stripo’s template)
Welcome email: Introduces new subscribers to your brand, warmly greeting them and guiding them on how to get started.
(Source: Stripo’s template)
Promotional email: Highlights special offers, discounts, or new products, thereby aiming to drive conversions and increase sales.
(Source: Stripo’s template)
Deliverability and optimization
Ensuring your emails reach recipients’ inboxes requires attention to both the technical setup and content quality. Here are a few key strategies to optimize HTML emails for better deliverability.
1. Keep code clean and lightweight
Well-structured, minimal HTML helps prevent email clients and spam filters from flagging your email. Avoid unnecessary nested tables, excessive inline styles, or overly complex code.
2. Use multipart MIME (HTML + plain text)
Always include a plain-text version of your email in addition to HTML. Certain email clients treat HTML-only emails as suspicious and spam filters may penalize them.
3. Maintain a healthy text-to-image ratio
Overusing images can increase the likelihood that spam filters flag your email; thus, maintaining a balance between text and visuals helps reduce this risk.
For example, Email on Acid recommends a guideline of approximately 60% text to 40% images. In contrast, Mailchimp suggests a ratio of 80% text to 20% images as a general rule. However, the platform notes that each spam filter may employ different criteria for determining what constitutes a healthy balance of text and graphics.
4. Avoid potential spammy phrases
There is no universal list of “spam words,” as filters differ between email clients and providers. As a best practice, avoid language that feels sensational and overly promotional or creates false urgency.
Examples to use cautiously:
- “Hurry, while supplies last”
- “Once in a lifetime”
- “Last-minute deal”
While spam filters may or may not flag these words, avoiding them reduces the likelihood that recipients perceive your email campaigns as spam or mark them as spam, which can negatively impact your deliverability.
5. Optimize images for load speed
Compress images to reduce email size and improve load times. If images load slowly, recipients may delete or ignore your email, which reduces engagement metrics. Over time, low engagement can hurt your sender reputation and overall deliverability.
6. Test before sending
Use tools such as Email on Acid, or its built-in integration in Stripo, to preview your email across clients and devices and identify formatting issues. Additionally, check your emails for broken links and potential spam triggers before sending them to your entire list.
Wrapping up
Creating HTML emails may initially seem complex; however, with a clear goal, clean code, thoughtful design, and compelling writing, you can create messages that perform well across clients. The key takeaways include planning with your audience in mind, using table-based layouts with inline styles for maximum compatibility, balancing visuals with accessible live text, and always testing before you hit “send.”
If hand-coding feels too time-consuming, no-code builders such as Stripo make it easy to design professional and responsive emails without technical hurdles.
0 comments