Email Starter Template
A starter email template is a ready-made, adjustable design for creating HTML emails. It gives you a simple structure, layout, and style to make professional emails fast. You can tweak it to fit your brand, and it works well on different email apps and devices, even older ones like Outlook. It’s perfect for beginners and experienced email creators alike.
Key Features of a Starter Email Template
- Basic Structure: Includes a header, body, and footer.
- Preheader Text: Hidden snippet text that appears in inbox previews after the subject line.
- Responsive Layout: Built with tables and inline styles for maximum compatibility.
- CTA Buttons: Pre-styled buttons to increase engagement and clicks.
- Customizable Content: Easy-to-edit sections for text, images, and links.
Starter Email Template Preview

Starter Email Template Code (Copy & Paste)
<!--
📧 HTML Email Starter Template
▸ Source: EmailTechnica.com
▸ Version: 06.11.2025
-->
<!DOCTYPE html>
<!-- Set the language and text direction for the email -->
<html lang="en" dir="ltr" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- Essential meta tags for email responsiveness and compatibility -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<!-- Prevent iOS from automatically linking phone numbers -->
<meta name="format-detection" content="telephone=no">
<!-- Set email client compatibility modes -->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<!-- Set title for preview and accessibility -->
<title>Email Technica</title>
<!-- Outlook-specific settings -->
<!--[if mso]>
<style type="text/css">
table {border-collapse: collapse;}
td {padding: 0;}
div, td {font-family: Arial, sans-serif;}
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!-- Global styles and resets -->
<style>
/* Reset box sizing for consistency */
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Prevent extra spacing in Outlook */
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Responsive styles: only apply when screen is 600px or less */
@media only screen and (max-width: 600px) {
.m-w-100p {
width: 100% !important;
}
.m-text-center {
text-align: center !important;
}
.m-pad-t-20 {
padding-top: 20px !important;
}
.m-pad-lr-40 {
padding-left: 40px !important;
padding-right: 40px !important;
}
.m-float-center {
float: none !important;
margin: 0 auto !important;
}
}
</style>
</head>
<body lang="en" role="article" aria-roledescription="email" aria-label="Email Title Goes Here" style="width: 100%; margin: 0; padding: 0; background-color: #ffffff;">
<!-- START: Preheader Text (visible in inbox preview but hidden in body) -->
<!--[if !mso]><!-->
<div style="display: none; max-height: 0; overflow: hidden;" aria-hidden="true">
Master HTML email coding with Emailtechnica.com!
</div>
<!--<![endif]-->
<div style="display: none; max-height: 0px; overflow: hidden;" aria-hidden="true">
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌<wbr> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌<wbr> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌<wbr> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌<wbr> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌<wbr> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌<wbr> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌<wbr> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌<wbr> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌</div>
<!-- END: Preheader Text -->
<!-- START: Outer Wrapper Table: centers content, ensures full width background -->
<table class="m-w-100p" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="width: 100%;">
<tr>
<td width="100%" border="0" align="center" style="width: 100%; ">
<!-- START: Primary email container (max-width: 600px) -->
<table class="m-w-100p" width="600" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="width: 600px; max-width: 600px; background-color: #FCF5E5;">
<!-- START: Header -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%; ">
<table class="m-w-100p" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="width: 100%;">
<tr>
<!-- START: Vertical Spacing -->
<td width="100%" border="0" align="center" style="width: 100%; padding-top: 40px;">
<table class="m-w-100p" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<!-- START: Horizontal Spacing -->
<td width="100%" border="0" align="center" style="width: 100%; padding: 0px 20px;">
<table class="m-w-100p" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<!-- START: Logo Image -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%;"><a href="https://emailtechnica.com/" target="_blank"><img class="m-w-100p" src="https://placehold.co/150x75/purple/white?text=LOGO&font=roboto" border="0" style="display: block; max-width: 150px;" width="150" height="75" alt="Alt text describing image."></a>
</td>
</tr>
<!-- END: Logo Image -->
</table>
</td>
<!-- END: Horizontal Spacing -->
</tr>
</table>
</td>
<!-- END: Vertical Spacing -->
</tr>
<!-- END: Logo Section -->
</table>
</td>
</tr>
<!-- END: Header -->
<!-- START: Body Content -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%; padding-top: 40px;">
<table class="m-w-100p" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="width: 100%;">
<!-- START: Hero Image Section -->
<tr>
<!-- START: Vertical Spacing -->
<td width="100%" border="0" align="center" style="width: 100%;">
<table class="m-w-100p" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<!-- START: Horizontal Spacing -->
<td width="100%" border="0" align="center" style="width: 100%;">
<table class="m-w-100p" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<!-- START: Hero Image -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%; "><a href="https://emailtechnica.com/" target="_blank"><img class="m-w-100p" src="https://placehold.co/1200x800/teal/white?text=HERO IMAGE&font=roboto" border="0" style="display: block; max-width: 600px;" width="600" height="400" alt="Alt text describing image."></a>
</td>
</tr>
<!-- END: Hero Image -->
</table>
</td>
<!-- END: Horizontal Spacing -->
</tr>
</table>
</td>
<!-- END: Vertical Spacing -->
</tr>
<!-- END: Hero Image Section -->
<!-- START: Intro Text Block with Heading and Description -->
<tr>
<!-- START: Vertical Spacing -->
<td class="m-pad-t-20" width="100%" border="0" align="center" style="width: 100%; padding-top: 40px;">
<table class="m-w-100p m-float-center" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0px auto; float: none;">
<tr>
<!-- START: Horizontal Spacing -->
<td class="m-pad-lr-40" width="100%" border="0" align="center" style="width: 100%; padding: 0px 40px;">
<!-- heading -->
<h1 style="font-family: Arial, sans-serif; font-size: 42px; font-weight: bold; font-weight: 800; color: #002b5c; line-height: 1.2; text-align: center;">Catchy H1 Headline</h1>
<!-- paragraph -->
<p class="m-text-center" style="margin-top: 20px; font-family: Arial, sans-serif; font-size: 16px; font-weight: 400; color: #222222; line-height: 1.5; text-align: left;">Emailtechnica.com is an invaluable resource for anyone looking to master the art of coding proper HTML emails. The site offers comprehensive tutorials, practical examples, and expert tips that cover everything from basic email structure to advanced responsive design techniques. Whether you're a beginner struggling with inline CSS or an experienced developer aiming to optimize for various email clients, <a href="https://emailtechnica.com/" target="_blank" style="color: #002b5c; text-decoration: underline; font-weight: 600;">Emailtechnica.com</a> provides clear, step-by-step guidance. Its lessons on troubleshooting common rendering issues and ensuring cross-client compatibility are particularly helpful, making it a go-to destination for crafting professional, pixel-perfect emails. By following their well-structured content, you can confidently create emails that look great and perform flawlessly across all platforms.
</p>
</td>
<!-- END: Horizontal Spacing -->
</tr>
</table>
</td>
<!-- END: Vertical Spacing -->
</tr>
<!-- END: Intro Text Block with Heading and Description -->
<!-- START: Button block – includes CTA with center alignment -->
<tr>
<!-- START: Vertical Spacing -->
<td width="100%" border="0" align="center" style="width: 100%; padding-top: 50px;">
<table class="m-w-100p" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0px auto; float: none;">
<tr>
<!-- START: Horizontal Spacing -->
<td width="100%" border="0" align="center" style="width: 100%;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="width: 100%; margin: 0px auto; float: none;">
<tr>
<td width="100%" border="0" align="center" style="width: 100%;">
<table width="" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="margin: 0px auto; float: none;">
<tr>
<td width="100%" border="0" align="center" style="width: 100%;"><a href="https://emailtechnica.com/" target="_blank"
style="display: inline-block; padding: 16px 40px; background: #002b5c; font-family: Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.2; color: #ffffff; text-decoration: none; border-radius: 5px;">GET STARTED</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- END: Horizontal Spacing -->
</tr>
</table>
</td>
<!-- END: Vertical Spacing -->
</tr>
<!-- END: Button block – includes CTA with center alignment -->
</table>
</td>
</tr>
<!-- END: Body Content -->
<!-- START: Footer -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%; padding-top: 40px;">
<table class="m-w-100p" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="width: 100%;">
<!-- START: Footer Logo -->
<tr>
<!-- START: Vertical Spacing -->
<td width="100%" border="0" align="center" style="width: 100%; padding: 40px 0 0;">
<table class="m-w-100p" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<!-- START: Horizontal Spacing & Top Border -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%; padding: 0px 30px; padding-top: 30px; border-top: 2px solid #999999;">
<table class="m-w-100p" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<!-- START: Logo Image -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%; "><a href="https://emailtechnica.com/" target="_blank"><img class="m-w-100p" src="https://placehold.co/100x50/purple/white?text=LOGO&font=roboto" border="0" style="display: block; max-width: 100px;" width="100" height="auto" alt="Descriptive Alt Text Goes Here"></a>
</td>
</tr>
<!-- END: Logo Image -->
</table>
</td>
</tr>
<!-- END: Horizontal Spacing & Top Border -->
</table>
</td>
<!-- END: Vertical Spacing -->
</tr>
<!-- END: Footer Logo -->
<!-- START: Footer Text -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%; padding: 20px 0px;">
<table class="m-w-100p" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td width="100%" border="0" align="center" style="width: 100%; padding: 0px 30px;">
<table class="m-w-100p" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<!-- START: Unsubscribe, Company Address, and Copyright -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%; ">
<p style="padding-top: 20px; font-family: Arial, sans-serif; font-size: 12px; font-weight: 600; color: #444444; mso-line-height-alt: 16px; line-height: 1.4; text-align: center;"><a href="https://emailtechnica.com/">Unsubscribe</a></p>
<p style="padding-top: 20px; font-family: Arial, sans-serif; font-size: 16px; font-weight: 600; color: #444444; mso-line-height-alt: 20px; text-align: center;">EMAIL TECHNICA<br>
<span style="padding-top: 0px; font-family: Arial, sans-serif; font-size: 12px; font-weight: 400; color: #444444; mso-line-height-alt: 16px; text-align: center;">1234 Company Address, City, State 12345</span></p>
<p style="margin-top: 10px; font-family: Arial, sans-serif; font-size: 12px; font-weight: 400; color: #444444; mso-line-height-alt: 16px; line-height: 1.4; text-align: center;">© 2025. All rights reserved.</p>
</td>
</tr>
<!-- END: Unsubscribe, Company Address, and Copyright -->
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- END: Footer Text -->
</table>
</td>
</tr>
<!-- END: Footer -->
</table>
<!-- END: Primary email container -->
</td>
</tr>
</table>
<!-- END: Outer Wrapper Table -->
</body>
</html>
Expand
How to Use a Starter Email Template
- Copy the Code: Start with the template code.
- Customize: Add your content, branding, and links.
- Test: Use tools like Litmus or Email on Acid to preview your email across devices and clients—or at the very least, send it to a few different email addresses and check how it appears on multiple devices.
- Send: Once you’re happy, send it through your email service provider (ESP).
Why It’s a Must-Have
A starter email template is the perfect tool for anyone creating HTML emails, whether you’re a beginner or an expert. It gives you a solid foundation to build on, so you can focus on crafting great content instead of worrying about compatibility or design.
Happy emailing! 🚀