This guide walks you through building a semantic, responsive HTML email template from scratch. By the end, you will have a working template that renders correctly in Gmail, Outlook 365, and Apple Mail, passes accessibility checks, and is ready to drop into any email service provider. Set aside about 90 minutes.
What You'll Build
- A full HTML email template with a header, body, and footer that renders across all major clients in 2026
- A fluid, single-column layout that scales from 320px to 600px without breakpoints
- An accessible structure with correct ARIA roles, alt text patterns, and readable contrast
- Inline CSS that survives Gmail's aggressive style stripping
- A reusable base you can hand off to a designer or plug into Mailchimp, Klaviyo, or Loops
Prerequisites
- Basic knowledge of HTML and CSS
- A code editor (VS Code works well)
- A free Litmus or Email on Acid account for client testing
- An email service provider account for a final send test (Mailchimp, Klaviyo, or Loops all offer free tiers)
- Node.js 20+ installed if you want to run the optional inline CSS step via the command line
Step 1: Understand Why Email HTML Is Different From Web HTML
Email clients do not behave like browsers. Outlook on Windows still uses Microsoft Word's rendering engine as of 2026. Gmail strips <style> blocks from the <head> in some contexts. Apple Mail is the most forgiving client, but it is also the least common among business audiences in Australia and Singapore.
This means three things matter from the start. First, layout must use tables, not CSS Grid or Flexbox. Second, all styles must end up inline before you send. Third, you cannot rely on external stylesheets or web fonts loading reliably.
Common pitfall: Writing the template in a modern CSS framework first and then trying to adapt it. Start with table-based structure and add styles inline from line one. Retrofitting costs twice the time.
Step 2: Set Up Your HTML Document Shell
Create a file called email.html. Paste this base structure:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="x-apple-disable-message-reformatting" />
<title>Email Title Here</title>
<style type="text/css">
/* Reset */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none; }
body { margin: 0; padding: 0; width: 100%; }
/* Responsive */
@media screen and (max-width: 600px) {
.full-width { width: 100% !important; }
.stack { display: block !important; width: 100% !important; }
}
</style>
</head>
<body style="margin:0; padding:0; background-color:#f4f4f4;">
</body>
</html>Why does the XHTML doctype matter?
Outlook's Word rendering engine responds better to XHTML Transitional than HTML5. Using HTML5 causes certain Outlook versions to drop table borders and spacing. The XHTML doctype is the accepted workaround as of 2026 and is recommended by the Can I Email compatibility database.
Step 3: Build the Outer Wrapper Table
Inside the <body> tag, add a full-width wrapper table. This centres your content and sets the background. Then add an inner content table capped at 600px.
<!-- Outer wrapper -->
<table role="presentation" border="0" cellpadding="0" cellspacing="0"
width="100%" style="background-color:#f4f4f4;">
<tr>
<td align="center" style="padding: 20px 0;">
<!-- Inner content table -->
<table role="presentation" border="0" cellpadding="0" cellspacing="0"
width="600" class="full-width"
style="background-color:#ffffff; border-radius:4px;">
<!-- Content rows go here -->
</table>
</td>
</tr>
</table>Pro tip: Always add role="presentation" to layout tables. Screen readers will skip them. Only data tables should be announced to assistive technology. This is a WCAG 2.2 requirement that also applies inside emails.
Step 4: Add the Header Section
Inside the inner content table, add a header row with your logo. Use an <img> tag with a meaningful alt attribute. Set a fallback background colour in case the image is blocked.
<tr>
<td align="center" style="padding: 32px 24px; background-color:#1a1a2e;">
<img
src="https://yourdomain.com/logo.png"
alt="Your Brand Name"
width="160"
style="display:block; max-width:160px; height:auto;"
/>
</td>
</tr>What if the logo image is blocked?
Around 43% of email opens happen with images disabled, according to Litmus's 2025 Email Client Market Share report. Set the background colour of the header cell to match your brand colour. Add a meaningful alt text so the brand name still appears as text. Never use an image-only header with no alt text.
Step 5: Build the Body Content Section
Add the main content row below the header. Keep the copy short. Emails with under 200 words in the body see higher click-through rates in most B2B contexts.
<tr>
<td style="padding: 40px 32px; font-family: Arial, sans-serif;
font-size: 16px; line-height: 1.6; color: #333333;">
<h1 style="margin: 0 0 16px 0; font-size: 24px;
font-weight: 700; color: #1a1a2e; line-height: 1.3;">
Your Headline Goes Here
</h1>
<p style="margin: 0 0 16px 0;">
Your opening paragraph. Keep it to two or three sentences.
</p>
<p style="margin: 0 0 24px 0;">
Supporting paragraph with more detail. Plain language works best.
</p>
<!-- CTA Button -->
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="border-radius: 4px; background-color: #4f46e5;">
<a href="https://yourdomain.com/page"
style="display: inline-block; padding: 14px 28px;
font-family: Arial, sans-serif; font-size: 15px;
font-weight: 700; color: #ffffff; text-decoration: none;
border-radius: 4px;">
Get Started
</a>
</td>
</tr>
</table>
</td>
</tr>Common pitfall: Using a <div> or <a> tag alone for the CTA button. Outlook will not render it as a block. Always wrap the CTA link in a <table> and <td> with the background colour on the cell, not the anchor tag.
Step 6: Add the Footer
A compliant footer includes your business address, an unsubscribe link, and any legal copy required in your market. This is mandatory under CAN-SPAM in the US, CASL in Canada, and the Spam Act in Australia.
<tr>
<td align="center"
style="padding: 24px 32px; background-color: #f4f4f4;
font-family: Arial, sans-serif; font-size: 12px;
line-height: 1.6; color: #999999;">
<p style="margin: 0 0 8px 0;">
Your Company Pty Ltd • 123 Example Street • Sydney NSW 2000
</p>
<p style="margin: 0;">
<a href="{{unsubscribe_url}}"
style="color: #999999; text-decoration: underline;">
Unsubscribe
</a>
·
<a href="https://yourdomain.com/privacy"
style="color: #999999; text-decoration: underline;">
Privacy Policy
</a>
</p>
</td>
</tr>Replace {{unsubscribe_url}} with your email service provider's merge tag. Mailchimp uses *|UNSUB|*, Klaviyo uses {{ unsubscribe_url }}, and Loops uses {{unsubscribeUrl}}.
Step 7: Inline Your CSS Before Sending
Gmail strips <style> blocks from the <head> in many contexts. You must inline all styles before uploading to your email service provider.
Run this from your terminal (requires Node.js 20+):
npx juice email.html email-inlined.htmlJuice is a well-maintained open-source tool that reads your <style> block and writes every rule as an inline style attribute. The output file is what you upload or paste into your ESP.
When should you skip the manual inline step?
Mailchimp and Klaviyo both offer built-in CSS inliners. If you are pasting your HTML directly into their template editors, you can skip the Juice step. Run it only when you are delivering the raw HTML file to a developer or uploading to an ESP that does not inline automatically.
Step 8: Test Across Email Clients
Upload email-inlined.html to Litmus or Email on Acid. Check at minimum: Gmail (web, Android, iOS), Outlook 2019 and 365 on Windows, and Apple Mail on macOS and iOS. These five environments cover around 87% of global email opens based on Litmus's 2025 data.
Look for three things in each preview. First, check that the single-column layout stacks correctly below 600px. Second, confirm that the CTA button renders with the correct background colour in Outlook. Third, verify that the footer text is legible at 12px.
If you are building email templates as part of a wider content or social strategy, you can pair this work with a structured content planning process. The free Lenka Studio Social Media Toolkit includes a content calendar template that maps well alongside email sequences.
Step 9: Send a Live Test
Before sending to your list, send the email to real inboxes you control. Use at least one Gmail address, one Outlook address, and one Apple Mail address. Open each one on a mobile device and a desktop.
Check that images load, that links resolve correctly, and that the unsubscribe link routes to a working page. Sending to a broken unsubscribe URL violates CAN-SPAM and CASL.
Pro tip: Forward the test email to a colleague and ask them to open it on their phone without any briefing. Watch what they click first. If it is not the CTA, move the CTA higher.
Frequently Asked Questions
Does this template work in dark mode?
Partially. Apple Mail and some Android clients apply dark mode automatically. Add color-scheme: light dark; in your <meta> and use a @media (prefers-color-scheme: dark) block in the <style> tag for basic dark mode support. Gmail on iOS does not support this media query as of 2026, so test specifically in that client.
Can I use web fonts like Google Fonts in emails?
Apple Mail and some versions of Outlook on Mac support web fonts via @font-face. Gmail and Outlook on Windows do not. Always declare a safe web-font fallback (Arial, Georgia, or Trebuchet MS) in your font stack. The web font will display where supported and the fallback will render everywhere else.
How wide should an HTML email be?
600px is the accepted maximum for the inner content table. This width fits comfortably in the preview pane of most desktop email clients and scales down cleanly on mobile. Templates wider than 640px cause horizontal scrolling in Outlook's reading pane.
What is the difference between this approach and using an ESP's drag-and-drop builder?
Drag-and-drop builders are faster for one-off sends but produce bloated HTML that is harder to maintain and customise precisely. A hand-coded template gives you full control over rendering, accessibility, and brand consistency. Teams at agencies like Lenka Studio often build a coded base template and then load it into the ESP for non-technical team members to edit copy.
How do I handle plain-text versions?
Most ESPs generate a plain-text version automatically from your HTML. Review the auto-generated version before sending. It often includes stray table characters and broken link formatting. Edit it manually to read as clean prose with full URLs written out.
Next Steps
You now have a working, accessible, cross-client HTML email template. From here, you can extend the template with a two-column product grid, add an animated GIF hero (keeping it under 1MB), or build a modular block library so your team can assemble new campaigns without touching the base code.
If you want help building a complete email system, including template design, automation flows, and ESP integration, the team at Lenka Studio works with SMBs across Australia, Singapore, Canada, and the US on exactly this kind of project. Get in touch and we can map out what your email programme actually needs.
