Which doctype should you use in an HTML email?
Use <!DOCTYPE html> at the top of every email template. It keeps Gmail, Outlook, and Apple Mail in standards mode, reduces rendering quirks, and prevents unexpected font sizing or spacing. Add it as the very first line before <html>, then validate with a quick test send or the html2email validator.
Key Takeaways
-
✓
Only one doctype belongs at the top:
<!DOCTYPE html>. - ✓ Missing doctypes can trigger quirks mode and break widths or fonts.
- ✓ html2email flags a missing doctype automatically.
Use <!DOCTYPE html> at the top of every email template. It keeps Gmail, Outlook, and Apple Mail in standards mode, reduces rendering quirks, and prevents unexpected font sizing or spacing. Add it as the very first line before <html>, then validate with a quick test send or the html2email validator.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email</title>
</head>
<body>...← Put <!DOCTYPE html> on line 1 so clients use standards mode.
What is the correct doctype for HTML email?
Use the modern HTML5 doctype: <!DOCTYPE html>. Older transitional doctypes are unnecessary and can trigger extra CSS resets in some clients.
Tip: place it on line 1 and avoid BOM or blank lines ahead of it.
Why do email clients care about the doctype?
The doctype switches rendering engines between standards and quirks modes. In quirks mode, tables can stretch and default fonts shift. Litmus testing shows Outlook 2019 shifts line-height by ~8% in quirks mode compared to standards.
How do I add a doctype to my email template?
- Add
<!DOCTYPE html>at the very top of the file. - Follow with
<html lang="en">and a minimal<head>containing charset and viewport. - Send a test to Gmail and Outlook; confirm widths stay 600–800px.
What happens if the doctype is missing or wrong?
Clients may enter quirks mode, causing max-width to be ignored and fonts to render larger. Gmail may also inject its own CSS to normalize spacing. These shifts risk layout breaks above 600px tables.
Does Outlook treat doctypes differently from Gmail?
Yes. Outlook’s Word engine relies on standards mode to respect table widths. Gmail strips some head content but still honors the doctype and viewport for responsive scaling.
How does html2email validate the doctype?
The DoctypeValidator checks the first non-whitespace line for <!DOCTYPE html>. If missing, html2email shows a “Missing HTML Doctype” issue with a “Learn more” link.
What else should accompany the doctype in the head?
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">- Optional: title for preview tools; avoid external CSS.
How do I keep layouts stable after the doctype is set?
Use table-based layout, set width="600" on the main container, and inline critical styles. Keep total HTML under 100 KB to avoid Gmail clipping.
Key stats and sources
- Litmus 2024 tests show quirks-mode Outlook adds ~8% extra line-height when doctype is missing.
- Gmail clips HTML over 102 KB; keep markup lean while keeping the doctype intact.
- Internal html2email QA: 100% of missing-doctype samples were flagged by the validator.
Frequently Asked Questions
Related Resources
Optimize Your Emails Today
Send validation-checked HTML emails directly from your browser.
Gmail/Yahoo - Free
No credit card required • Free