A starter email template is a pre-designed, reusable framework for creating HTML emails. It provides the basic structure, layout, and styling needed to build professional-looking emails quickly and efficiently. Starter templates are designed to be customizable, so you can adapt them to fit your brand while ensuring they work well across different email clients and devices.
Why Use a Starter Email Template?
- Saves Time: You don’t have to start from scratch every time you create an email.
- Ensures Consistency: Keeps your emails looking professional and on-brand.
- Responsive Design: Automatically adjusts to different screen sizes (desktop, mobile, tablets).
- Cross-Client Compatibility: Works in popular email clients like Gmail, Outlook, and Apple Mail.
- Accessibility: Includes features like semantic HTML and alt text for better accessibility.
Key Features of a Starter Email Template
- Basic Structure: Includes a header, body, and footer.
- Preheader Text: A hidden snippet of text that appears after the subject line in inbox previews.
- Responsive Layout: Uses tables and inline styles for compatibility.
- Call-to-Action (CTA) Buttons: Pre-styled buttons to drive clicks.
- Customizable Content: Easy-to-edit sections for text, images, and links.
Starter Email Template Code
<!DOCTYPE html>
<!-- Change the lang and dir attributes to match the language of your email and the direction of that language. -->
<html lang="en" dir="ltr" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<!-- [Email Code Camp Template Version 02.12.2025] -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<meta name="x-apple-disable-message-reformatting">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<!-- Browser Tab Name -->
<title>Email Title</title>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style>
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
</style>
<!-- Desktop-specific Classes -->
<style>
body {
margin: 0;
padding: 0;
word-spacing: normal;
}
h1 {
margin:0.67em 0;
font-size:2em;
}
#root [x-apple-data-detectors=true],
a[x-apple-data-detectors=true]{
color: inherit !important;
text-decoration: inherit !important;
}
a:hover {
text-decoration: none;
}
</style>
<!-- Mobile Styling Classes -->
<style>
@media only screen and (max-width: 600px) {
/* widths */
.m-w-100p {width: 100% !important;}
}
</style>
</head>
<!-- START: Body -->
<body id="body" style="width: 100%; padding: 0px; margin: 0px auto;">
<!-- START: Preheader (Preheader text is seen in the inbox) -->
<div style="display: none; max-height: 0px; overflow: hidden;" aria-hidden="true">Hidden PreHeader Text Goes Here
</div>
<!-- END: Preheader -->
<!--- Accessible Article (Adjust lang, dir, and aria-label attributes to match your email's language, text direction, and title.) --->
<div role="article" aria-roledescription="email" aria-label="Email Title" lang="en" dir="auto" style="font-size: 1rem;">
<!--------------- START: Email content --------------->
<!-- START: Email Wrapper (Ghost table formatting begins: table,tr,td -->
<table class="m-w-100p" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; margin: 0px;">
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px;">
<!--- START: Email Container --->
<table class="m-w-100p" width="600" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 600px; max-width: 600px; margin: 0px; background-color: #FCF5E5;">
<!-- START: Header -->
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px;">
<table class="m-w-100p" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; margin: 0px;">
<!-- START: Logo Container -->
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px; padding-top: 20px;">
<table class="m-w-100p" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0px;">
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px 20px 10px;">
<table class="m-w-100p" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0px;">
<!-- START: Logo -->
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px; padding-top: 10px;"><a href="https://emailcodecamp.com/" target="_blank"><img class="m-w-100p" src="https://placehold.co/150x75/purple/white?text=LOGO&font=roboto" border="0" style="display: block; margin: 0px; max-width: 150px;" width="150" height="75" alt="Alt text describing image."></a>
</td>
</tr>
<!-- END: Logo -->
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- END: Logo Container -->
</table>
</td>
</tr>
<!-- END: Header -->
<!-- START: Body -->
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px; padding-top: 10px; padding-bottom: 40px;">
<table class="m-w-100p" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; margin: 0px;">
<!-- START: Hero Image Container -->
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px;">
<table class="m-w-100p" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0px;">
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px;">
<table class="m-w-100p" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0px;">
<!-- START: Hero Image -->
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px;"><a href="https://emailcodecamp.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; margin: 0px; max-width: 600px;" width="600" height="400" alt="Alt text describing image."></a>
</td>
</tr>
<!-- END: Hero Image -->
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- END: Hero Image Container -->
<!-- START: Text Container -->
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px; padding-top: 20px;">
<table class="m-w-100p" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0px;">
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px 10px;">
<!-- START: Text (H1/Paragraph) -->
<h1 style="padding: 0px 20px; margin: 0; font-family: Arial, sans-serif; font-size: 42px; font-weight: bold; font-weight: 700; color: #002b5c; mso-line-height-alt: 36px; line-height: 1.0; letter-spacing: normal; text-align: center;">Catchy H1 Headline</h1>
<p style="padding: 0px 20px; margin: 0px; margin-top: 10px; font-family: Arial, sans-serif; font-size: 16px; font-weight: 400; color: #222222; mso-line-height-alt: 23px; line-height: 1.5; letter-spacing: normal; text-align: left;">EmailCodeCamp.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://emailcodecamp.com/" target="_blank" style="color: #002b5c; text-decoration: underline; font-weight: 600;">EmailCodeCamp.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>
<!-- END: Text (H1/Paragraph) -->
</td>
</tr>
</table>
</td>
</tr>
<!-- END: Text Container -->
<!-- START: Button Container -->
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px; padding-top: 20px;">
<table class="m-w-100p" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0px;">
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px;">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; margin: 0px;">
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px;">
<table width="" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: 0px;">
<!-- START: Button -->
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 16px 40px; background: #002b5c; font-family: Arial, sans-serif; font-size: 20px; font-weight: 600; color: #FFFFFF; mso-line-height-alt: 14px; line-height: 1.0; letter-spacing: 1.1px; text-align: center; border-radius: 5px;"><a href="https://emailcodecamp.com/" target="_blank" style="font-family: Arial, sans-serif; color: #FFFFFF; text-decoration: none;">GET STARTED</a>
</td>
</tr>
<!-- END: Button -->
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- END: Button Container -->
</table>
</td>
</tr>
<!-- END: Body Container -->
<!-- START: Footer Container -->
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px;">
<table class="m-w-100p" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; margin: 0px;">
<!-- START: Footer Logo -->
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px;">
<table class="m-w-100p" width="100%" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%; margin: 0px;">
<tr>
<td width="100%" align="center" border="0" 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%; margin: 0px;">
<!-- START: Logo -->
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px;"><a href="#" target="_blank"><img class="m-w-100p" src="https://placehold.co/100x50/purple/white?text=LOGO&font=roboto" border="0" style="display: block; margin: 0px; max-width: 100px;" width="100" height="auto" alt="Descriptive Alt Text Goes Here"></a>
</td>
</tr>
<!-- END: Logo -->
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- END: Footer Logo -->
<!-- START: Footer Address -->
<tr>
<td width="100%" align="center" border="0" 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%; margin: 0px;">
<tr>
<td width="100%" align="center" border="0" 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%; margin: 0px;">
<!-- START: Text (Company Address/Copyright Information) -->
<tr>
<td width="100%" align="center" border="0" style="width: 100%; padding: 0px;">
<p style="padding: 0px; margin: 0px; font-family: Arial, sans-serif; font-size: 11px; font-weight: 400; color: #888888; mso-line-height-alt: 16px; line-height: 1.4; letter-spacing: normal; text-align: center;">1234 Company Address, City, State 12345</p>
<p style="padding: 0px; margin: 0px; margin-top: 10px; font-family: Arial, sans-serif; font-size: 11px; font-weight: 400; color: #888888; mso-line-height-alt: 16px; line-height: 1.4; letter-spacing: normal; text-align: center;">© 2025. All rights reserved.</p>
</td>
</tr>
<!-- END: Text (Company Address/Copyright Information) -->
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- END: Footer Address -->
</table>
</td>
</tr>
<!-- END: Footer Container -->
</table>
<!-- END: Email Container -->
</td>
</tr>
</table>
<!-- END: Email Wrapper -->
<!--------------- END: Email content --------------->
</div>
<!-- END: Accessible Article -->
</body>
<!-- END: 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 test across email clients.
- 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! 🚀