A reliable HTML email uses nested tables for layout, inline styles, a content width of about 600 pixels, buttons made from padded links rather than images, and alt text on every image. The eight templates below follow those rules, support dark mode where clients allow it, and can be edited and previewed live before you copy them.
| Template | Sent when |
|---|---|
| Welcome | Someone signs up |
| Receipt | A payment succeeds |
| Password reset | Someone asks to reset |
| Newsletter | Regular news |
| Verify email | After sign-up |
| Order shipped | An order leaves |
| Event invitation | Inviting customers |
| Feedback request | After a visit or order |
Updated
Edit the code on the left of any template and the preview on the right updates. The previews are rendered by your browser, so treat them as a guide: email clients vary, which is why the testing checklist at the bottom matters.
Prefer filling in a form? Use the HTML email template builder.
Thanks the person, says what happens next and offers one clear action.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Welcome to Harbour Bakery</title>
<style>
@media (prefers-color-scheme: dark) {
.bg { background: #111111 !important; }
.card { background: #1c1c1c !important; }
.text { color: #eeeeee !important; }
.muted { color: #aaaaaa !important; }
}
@media (max-width: 620px) { .card { padding: 24px !important; } }
</style>
</head>
<body style="margin:0;padding:0;">
<div style="display:none;max-height:0;overflow:hidden;">Your account is ready. Here is how to order your first loaf.</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:#f4f4f5;">
<tr><td align="center" style="padding:24px 12px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="card" style="max-width:600px;background:#ffffff;border-radius:12px;padding:40px;font-family:Arial,Helvetica,sans-serif;">
<tr><td class="text" style="font-size:24px;line-height:32px;font-weight:bold;color:#111111;padding-bottom:12px;">Welcome, Sam</td></tr>
<tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;">Thanks for joining Harbour Bakery. You can now order ahead and collect from the counter without queueing.</td></tr>
<tr><td style="padding:8px 0 24px;">
<table role="presentation" cellpadding="0" cellspacing="0"><tr>
<td style="border-radius:8px;background:#2563eb;">
<a href="https://example.com/order" style="display:inline-block;padding:14px 28px;font-size:16px;font-weight:bold;color:#ffffff;text-decoration:none;border-radius:8px;">Place your first order</a>
</td>
</tr></table>
</td></tr>
<tr><td class="muted" style="font-size:13px;line-height:20px;color:#6b6b6b;padding-top:16px;">Questions? Just reply to this email.</td></tr>
</table>
</td></tr>
</table>
</body>
</html>A nested table keeps item names and prices aligned in every client, including old desktop ones.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Your receipt</title>
<style>
@media (prefers-color-scheme: dark) {
.bg { background: #111111 !important; }
.card { background: #1c1c1c !important; }
.text { color: #eeeeee !important; }
.muted { color: #aaaaaa !important; }
}
@media (max-width: 620px) { .card { padding: 24px !important; } }
</style>
</head>
<body style="margin:0;padding:0;">
<div style="display:none;max-height:0;overflow:hidden;">Receipt for order #1042, total $24.50.</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:#f4f4f5;">
<tr><td align="center" style="padding:24px 12px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="card" style="max-width:600px;background:#ffffff;border-radius:12px;padding:40px;font-family:Arial,Helvetica,sans-serif;">
<tr><td class="text" style="font-size:24px;line-height:32px;font-weight:bold;color:#111111;padding-bottom:12px;">Thanks for your order</td></tr>
<tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;">Order #1042, paid on 5 March 2026.</td></tr>
<tr><td>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;">
<tr><td class="text" style="padding:8px 0;font-size:15px;color:#333333;">Sourdough loaf x 2</td><td class="text" align="right" style="padding:8px 0;font-size:15px;color:#333333;">$14.00</td></tr>
<tr><td class="text" style="padding:8px 0;font-size:15px;color:#333333;">Cinnamon buns x 3</td><td class="text" align="right" style="padding:8px 0;font-size:15px;color:#333333;">$9.00</td></tr>
<tr><td class="text" style="padding:8px 0;font-size:15px;color:#333333;">Paper bag</td><td class="text" align="right" style="padding:8px 0;font-size:15px;color:#333333;">$1.50</td></tr>
<tr><td class="text" style="padding:8px 0;font-size:15px;color:#333333;font-weight:bold;">Total</td><td class="text" align="right" style="padding:8px 0;font-size:15px;color:#333333;font-weight:bold;">$24.50</td></tr>
</table>
</td></tr>
<tr><td class="muted" style="font-size:13px;line-height:20px;color:#6b6b6b;padding-top:16px;">Harbour Bakery, 12 Quay Street, Portsmouth NH. Keep this email as your receipt.</td></tr>
</table>
</td></tr>
</table>
</body>
</html>Short, with the expiry time and what to do if the person did not ask for it. Include the link as text too, for clients that block buttons.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Reset your password</title>
<style>
@media (prefers-color-scheme: dark) {
.bg { background: #111111 !important; }
.card { background: #1c1c1c !important; }
.text { color: #eeeeee !important; }
.muted { color: #aaaaaa !important; }
}
@media (max-width: 620px) { .card { padding: 24px !important; } }
</style>
</head>
<body style="margin:0;padding:0;">
<div style="display:none;max-height:0;overflow:hidden;">Use this link within 30 minutes to choose a new password.</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:#f4f4f5;">
<tr><td align="center" style="padding:24px 12px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="card" style="max-width:600px;background:#ffffff;border-radius:12px;padding:40px;font-family:Arial,Helvetica,sans-serif;">
<tr><td class="text" style="font-size:24px;line-height:32px;font-weight:bold;color:#111111;padding-bottom:12px;">Reset your password</td></tr>
<tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;">We received a request to reset the password for your account. The link works for 30 minutes.</td></tr>
<tr><td style="padding:8px 0 24px;">
<table role="presentation" cellpadding="0" cellspacing="0"><tr>
<td style="border-radius:8px;background:#2563eb;">
<a href="https://example.com/reset?token=TOKEN" style="display:inline-block;padding:14px 28px;font-size:16px;font-weight:bold;color:#ffffff;text-decoration:none;border-radius:8px;">Choose a new password</a>
</td>
</tr></table>
</td></tr>
<tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;">Or paste this link into your browser:<br><span style="word-break:break-all;color:#2563eb;">https://example.com/reset?token=TOKEN</span></td></tr>
<tr><td class="muted" style="font-size:13px;line-height:20px;color:#6b6b6b;padding-top:16px;">Did not ask for this? Ignore this email; your password will not change.</td></tr>
</table>
</td></tr>
</table>
</body>
</html>One story per block with a heading, a sentence and a link. The image URL here is a placeholder, so the preview shows what readers see with images blocked: the alt text in a box of the right size.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>March at the bakery</title>
<style>
@media (prefers-color-scheme: dark) {
.bg { background: #111111 !important; }
.card { background: #1c1c1c !important; }
.text { color: #eeeeee !important; }
.muted { color: #aaaaaa !important; }
}
@media (max-width: 620px) { .card { padding: 24px !important; } }
</style>
</head>
<body style="margin:0;padding:0;">
<div style="display:none;max-height:0;overflow:hidden;">New spring loaves, a weekend workshop and longer Saturday hours.</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:#f4f4f5;">
<tr><td align="center" style="padding:24px 12px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="card" style="max-width:600px;background:#ffffff;border-radius:12px;padding:40px;font-family:Arial,Helvetica,sans-serif;">
<tr><td class="text" style="font-size:24px;line-height:32px;font-weight:bold;color:#111111;padding-bottom:12px;">March at the bakery</td></tr>
<tr><td style="padding-bottom:16px;"><img src="https://example.com/images/spring-loaves.jpg" width="520" height="220" alt="Three spring loaves on a board" style="display:block;width:100%;max-width:520px;height:auto;border-radius:8px;"></td></tr>
<tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;"><strong>Spring loaves are back.</strong> Wild garlic and cheddar every Thursday until May.</td></tr>
<tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;"><strong>Bread workshop, 14 March.</strong> Three hours, two loaves to take home, eight places.</td></tr>
<tr><td style="padding:8px 0 24px;">
<table role="presentation" cellpadding="0" cellspacing="0"><tr>
<td style="border-radius:8px;background:#2563eb;">
<a href="https://example.com/workshop" style="display:inline-block;padding:14px 28px;font-size:16px;font-weight:bold;color:#ffffff;text-decoration:none;border-radius:8px;">Book a place</a>
</td>
</tr></table>
</td></tr>
<tr><td class="muted" style="font-size:13px;line-height:20px;color:#6b6b6b;padding-top:16px;">You get this because you signed up at our counter. <a href="https://example.com/unsubscribe" style="color:#6b6b6b;">Unsubscribe</a></td></tr>
</table>
</td></tr>
</table>
</body>
</html>Used after sign-up. A code as well as a button helps people who open the email on another device.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Confirm your email</title>
<style>
@media (prefers-color-scheme: dark) {
.bg { background: #111111 !important; }
.card { background: #1c1c1c !important; }
.text { color: #eeeeee !important; }
.muted { color: #aaaaaa !important; }
}
@media (max-width: 620px) { .card { padding: 24px !important; } }
</style>
</head>
<body style="margin:0;padding:0;">
<div style="display:none;max-height:0;overflow:hidden;">Your code is 482 913.</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:#f4f4f5;">
<tr><td align="center" style="padding:24px 12px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="card" style="max-width:600px;background:#ffffff;border-radius:12px;padding:40px;font-family:Arial,Helvetica,sans-serif;">
<tr><td class="text" style="font-size:24px;line-height:32px;font-weight:bold;color:#111111;padding-bottom:12px;">Confirm your email</td></tr>
<tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;">Enter this code in the app, or tap the button.</td></tr>
<tr><td class="text" style="font-size:32px;letter-spacing:8px;font-weight:bold;color:#111111;padding:8px 0 16px;">482 913</td></tr>
<tr><td style="padding:8px 0 24px;">
<table role="presentation" cellpadding="0" cellspacing="0"><tr>
<td style="border-radius:8px;background:#2563eb;">
<a href="https://example.com/verify?token=TOKEN" style="display:inline-block;padding:14px 28px;font-size:16px;font-weight:bold;color:#ffffff;text-decoration:none;border-radius:8px;">Confirm email</a>
</td>
</tr></table>
</td></tr>
<tr><td class="muted" style="font-size:13px;line-height:20px;color:#6b6b6b;padding-top:16px;">The code expires in 15 minutes.</td></tr>
</table>
</td></tr>
</table>
</body>
</html>Puts the tracking link first; that is what the reader opened the email for.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Your order is on its way</title>
<style>
@media (prefers-color-scheme: dark) {
.bg { background: #111111 !important; }
.card { background: #1c1c1c !important; }
.text { color: #eeeeee !important; }
.muted { color: #aaaaaa !important; }
}
@media (max-width: 620px) { .card { padding: 24px !important; } }
</style>
</head>
<body style="margin:0;padding:0;">
<div style="display:none;max-height:0;overflow:hidden;">Order #1042 has shipped. Track it here.</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:#f4f4f5;">
<tr><td align="center" style="padding:24px 12px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="card" style="max-width:600px;background:#ffffff;border-radius:12px;padding:40px;font-family:Arial,Helvetica,sans-serif;">
<tr><td class="text" style="font-size:24px;line-height:32px;font-weight:bold;color:#111111;padding-bottom:12px;">Your order is on its way</td></tr>
<tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;">Order #1042 left our kitchen this morning and should arrive on Thursday.</td></tr>
<tr><td style="padding:8px 0 24px;">
<table role="presentation" cellpadding="0" cellspacing="0"><tr>
<td style="border-radius:8px;background:#2563eb;">
<a href="https://example.com/track/1042" style="display:inline-block;padding:14px 28px;font-size:16px;font-weight:bold;color:#ffffff;text-decoration:none;border-radius:8px;">Track your parcel</a>
</td>
</tr></table>
</td></tr>
<tr><td class="muted" style="font-size:13px;line-height:20px;color:#6b6b6b;padding-top:16px;">Delivery to: 4 Pine Lane, Portsmouth NH 03801</td></tr>
</table>
</td></tr>
</table>
</body>
</html>Date, time and place in a block that is easy to scan, then the single action.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>You are invited: spring open day</title>
<style>
@media (prefers-color-scheme: dark) {
.bg { background: #111111 !important; }
.card { background: #1c1c1c !important; }
.text { color: #eeeeee !important; }
.muted { color: #aaaaaa !important; }
}
@media (max-width: 620px) { .card { padding: 24px !important; } }
</style>
</head>
<body style="margin:0;padding:0;">
<div style="display:none;max-height:0;overflow:hidden;">Saturday 21 March, 10 am to 2 pm. Free tastings.</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:#f4f4f5;">
<tr><td align="center" style="padding:24px 12px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="card" style="max-width:600px;background:#ffffff;border-radius:12px;padding:40px;font-family:Arial,Helvetica,sans-serif;">
<tr><td class="text" style="font-size:24px;line-height:32px;font-weight:bold;color:#111111;padding-bottom:12px;">Spring open day</td></tr>
<tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;">Come and see the ovens, meet the bakers and try this season's loaves.</td></tr>
<tr><td class="text" style="font-size:16px;line-height:26px;color:#333333;padding:12px 16px;background:#f4f4f5;border-radius:8px;"><strong>Saturday 21 March</strong><br>10 am to 2 pm<br>12 Quay Street, Portsmouth</td></tr>
<tr><td style="height:16px;"></td></tr>
<tr><td style="padding:8px 0 24px;">
<table role="presentation" cellpadding="0" cellspacing="0"><tr>
<td style="border-radius:8px;background:#2563eb;">
<a href="https://example.com/open-day" style="display:inline-block;padding:14px 28px;font-size:16px;font-weight:bold;color:#ffffff;text-decoration:none;border-radius:8px;">Save your spot</a>
</td>
</tr></table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>One question with one-tap answers gets far more replies than a link to a long survey.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>How was your order?</title>
<style>
@media (prefers-color-scheme: dark) {
.bg { background: #111111 !important; }
.card { background: #1c1c1c !important; }
.text { color: #eeeeee !important; }
.muted { color: #aaaaaa !important; }
}
@media (max-width: 620px) { .card { padding: 24px !important; } }
</style>
</head>
<body style="margin:0;padding:0;">
<div style="display:none;max-height:0;overflow:hidden;">One tap to tell us how we did.</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:#f4f4f5;">
<tr><td align="center" style="padding:24px 12px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="card" style="max-width:600px;background:#ffffff;border-radius:12px;padding:40px;font-family:Arial,Helvetica,sans-serif;">
<tr><td class="text" style="font-size:24px;line-height:32px;font-weight:bold;color:#111111;padding-bottom:12px;">How was your order?</td></tr>
<tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;">Tap one. It takes a second and helps us bake better.</td></tr>
<tr><td style="padding-bottom:16px;">
<table role="presentation" cellpadding="0" cellspacing="0"><tr>
<td style="padding-right:8px;"><a href="https://example.com/feedback?r=great" style="display:inline-block;padding:12px 18px;border:1px solid #d4d4d8;border-radius:8px;color:#111111;text-decoration:none;font-size:15px;">Great</a></td>
<td style="padding-right:8px;"><a href="https://example.com/feedback?r=okay" style="display:inline-block;padding:12px 18px;border:1px solid #d4d4d8;border-radius:8px;color:#111111;text-decoration:none;font-size:15px;">Okay</a></td>
<td style="padding-right:8px;"><a href="https://example.com/feedback?r=not-good" style="display:inline-block;padding:12px 18px;border:1px solid #d4d4d8;border-radius:8px;color:#111111;text-decoration:none;font-size:15px;">Not good</a></td>
</tr></table>
</td></tr>
<tr><td class="muted" style="font-size:13px;line-height:20px;color:#6b6b6b;padding-top:16px;">Reply to this email if you would like to tell us more.</td></tr>
</table>
</td></tr>
</table>
</body>
</html>| Rule | Why |
|---|---|
| Lay out with tables (role="presentation") | Some desktop clients still ignore flexbox, grid and many positioning rules |
| Inline the important styles | Some clients and webmail views strip or ignore style blocks |
| Keep the content width about 600px | Fits the reading pane of most clients |
| Make buttons from a padded link inside a coloured cell | Survives clients that block images and ignore some CSS |
| Set width, height and alt on every image | Images are often blocked until the reader allows them |
| Add a hidden preheader | Controls the preview text shown after the subject line |
| Use color-scheme meta and prefers-color-scheme | Clients that support dark mode use your dark colours instead of inverting |
| Include an unsubscribe link in marketing email | Required by anti-spam laws and by large mailbox providers |
| Test | How |
|---|---|
| Real clients | Send to accounts on the big webmail services, a desktop client and a phone |
| Images off | Turn off image loading and check the email still makes sense |
| Dark mode | Switch the phone and the desktop client to dark mode |
| Links | Click every link, including the unsubscribe link |
| Plain-text part | Send a text version too; some readers and filters use it |
| Spam check | Authenticate your domain (SPF, DKIM, DMARC) before sending in volume |
Send a plain-text version alongside the HTML. Most email platforms generate one; read it once, because a receipt or reset link must still make sense without formatting.
Some email clients, notably older desktop ones, render with engines that ignore modern CSS layout. Tables are the one layout method that works across all of them.
Add the color-scheme meta tags and a prefers-color-scheme media query with your dark colours. Clients that support it use them; others may invert colours themselves, so avoid text baked into images and test both modes.
Yes. We wrote them for this page; copy, change and send them in any project.
A button built from a link with padding inside a coloured table cell instead of an image. It still shows and works when images are blocked.
Related: HTML email template builder, Password reset email template, Email signature generator, Email subject line tester, All free tools.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.