HTML Email Basics: Examples, Structure, and Testing
HTML email is an email built with markup, inline styles, and layout patterns that email clients can render. It is not the same as a web page. Tables, fallbacks, accessibility, image handling, and client testing matter more than modern CSS tricks.
Sohail Hussain5 min readHTML email is an email written with markup so it can include headings, links, images, buttons, layout, and brand styling. It looks like web development, but email clients are stricter and less consistent than browsers. The safest emails use simple structure, inline CSS, fallbacks, and real client testing.
Gmail supports structured email markup for certain actions and schemas, but it requires correct markup and testing before use (Gmail markup overview). For ordinary marketing emails, the bigger lesson is similar: email clients decide what survives.
Table of contents
What is HTML email?
HTML email is a MIME email part containing HTML content. Most marketing messages include both an HTML part and a plain-text part. The HTML part controls the visual layout; the plain-text part gives a readable fallback for clients, screen readers, filters, and users who prefer text.
Basic structure:
<!doctype html>
<html>
<body>
<h1>Welcome to Mailneo</h1>
<p>Your account is ready.</p>
<a href="https://www.mailneo.co">Open dashboard</a>
</body>
</html>
Real production email adds tables, inline styles, preview text, alt text, tracking-safe links, and mobile adjustments. If you paste website HTML into an email editor, it will usually break.
How is HTML email different from a web page?
HTML email is constrained by email-client rendering. Gmail, Outlook, Apple Mail, Yahoo, and mobile clients all have quirks. Some strip scripts. Some mangle CSS. Some proxy images. Some hide images by default. Outlook desktop can be especially strict because parts of it render through Microsoft Word.
| Area | Web page | HTML email |
|---|---|---|
| CSS | Modern layout widely supported | Inline and conservative CSS safest |
| JavaScript | Common | Blocked in normal email |
| Layout | Flexbox and grid | Tables still common |
| Testing | Browser matrix | Email client matrix |
The limitation is not a reason to avoid HTML. It is a reason to design for the inbox instead of pretending it is a browser tab.
Campaign Monitor's CSS support guide exists because email CSS support differs by client, device, and rendering engine (Campaign Monitor CSS guide). Can I Email tracks support for hundreds of HTML and CSS features across email clients (Can I Email support tables). Use those resources before shipping newer layout patterns.
What should a basic HTML email include?
A solid HTML email includes preview text, a clear content hierarchy, readable body copy, accessible links, alt text for images, a plain-text version, and a footer with compliance details for marketing sends.
Use this starter checklist:
- Preheader text that expands the subject line.
- One primary heading.
- Body width around 600px for desktop.
- Inline CSS for important styles.
- Buttons built with reliable HTML, not background images alone.
- Descriptive alt text.
- Plain-text fallback.
- Unsubscribe and address footer where required.
For conversion-focused design, read our email templates guide. For subject and preview pairing, use the email preheader previewer.
What are simple HTML email examples?
Here is a minimal announcement:
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table role="presentation" width="600" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family:Arial,sans-serif;padding:24px;">
<h1 style="font-size:24px;margin:0 0 12px;">New report is ready</h1>
<p style="font-size:16px;line-height:1.5;">
Your deliverability report for June is ready to review.
</p>
<a href="https://www.mailneo.co"
style="display:inline-block;padding:12px 18px;background:#111;color:#fff;text-decoration:none;">
View report
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
It is not glamorous, but it will survive more clients than a web-style layout with nested flex rules. Test from there, then add complexity only when the client matrix supports it.
During testing, compare the same email in at least one Gmail view, one Outlook view, one Apple Mail or iOS view, and one dark-mode view. Keep notes beside the template, not in a separate QA thread, so future edits preserve the client-specific fixes.
How do you test HTML email?
Test HTML email in real clients before large sends. At minimum, check Gmail web, Gmail mobile, Outlook desktop, Outlook web, Apple Mail, and one dark-mode view. Also test links, alt text, plain text, unsubscribe, and spam risk.
Use our responsive email tester, email accessibility checker, and spam checker before publishing new templates. Testing is slower than guessing; it is much cheaper than sending broken markup to 40,000 subscribers.
Key takeaways
- HTML email is markup for inboxes, not normal web-page HTML.
- Tables and inline styles remain common because client support is uneven.
- Always include a plain-text version and test across real clients.
Frequently asked questions
Can I use CSS grid in HTML email?
Avoid relying on CSS grid for production emails. Some clients may support it, but table-based or hybrid layouts are safer across the full inbox matrix.
Do HTML emails need a plain-text version?
Yes. A plain-text version improves accessibility, fallback behavior, and deliverability hygiene.
Can HTML email include JavaScript?
No for normal email. Most clients block scripts for security. Use landing pages or AMP for Email where supported and appropriate.
Related resources
Explore: Email Design & Content
Related Articles
How to Create Email Templates That Convert
Email templates that convert share five traits: a single clear CTA, a hero section that answers 'why should I read this', one-column mobile-first layouts, preheader text that extends the subject line, and a scannable F-pattern body that respects how people actually read inboxes.
AMP for Email: What It Is and How to Use It
AMP for email turns a static message into an interactive web app inside the inbox, letting subscribers submit forms, browse carousels, and update data without leaving Gmail. Support is limited to Gmail, Yahoo, and Mail.ru, so fallback HTML still matters.
How to write email subject lines that get opened
Great email subject lines are short (under 50 characters), specific, and promise one clear benefit. Use curiosity, urgency, personalization, or a concrete number; avoid spam triggers and clickbait. Test two variants against a single variable, and watch the first 41 characters (where mobile truncates). Small wording changes can swing open rates 10–50%.
Mailto Link HTML Guide: Syntax, Examples, and Pitfalls
A mailto link opens the user's email client with a prefilled recipient, subject, body, cc, or bcc field. It is useful for simple contact actions, but it is not a form replacement. This guide shows the exact HTML syntax, encoding rules, and mistakes to avoid.
Ready to supercharge your email marketing?
Start sending smarter emails with AI-powered campaigns. No credit card required.
Get Started Free