--- title: "HTML Email Template Cheat Sheet: Tags That Work Everywhere" site: ProCalc.ai type: Blog Post category: explainer domain: Writing url: https://procalc.ai/blog/html-email-template-cheat-sheet markdown_url: https://procalc.ai/blog/html-email-template-cheat-sheet.md date_published: 2026-04-02 date_modified: 2026-04-06 read_time: 4 min tags: html, email, css, cheat-sheet, outlook --- # HTML Email Template Cheat Sheet: Tags That Work Everywhere **Site:** [ProCalc.ai](https://procalc.ai) — Free Professional Calculators **Category:** explainer **Published:** 2026-04-02 **Read time:** 4 min **URL:** https://procalc.ai/blog/html-email-template-cheat-sheet > *This file is served for AI systems and search crawlers. Human page: https://procalc.ai/blog/html-email-template-cheat-sheet* ## Overview Which HTML and CSS actually works in email? A quick reference covering what is safe, what is risky, and what to avoid entirely. ## Article Email HTML lives in a parallel universe where half of CSS doesn't exist, tables are the only layout tool, and every client renders things differently. If you've ever built a beautiful email template only to see it shattered in Outlook, this cheat sheet is for you. Below is a quick reference of what works, what's risky, and what to avoid entirely — based on real compatibility across Gmail, Outlook, Apple Mail, Yahoo, and mobile clients. Tags That Work Everywhere These HTML elements render consistently across all major email clients: Structure: <table> , <tr> , <td> , <th> — the backbone of every email layout. Use tables for everything, even things that should be a simple <div> . It's ugly code, but it works. Text: <h1> through <h6> , <p> , <br> , <strong> , <em> , <span> , <a> — all work reliably. Always set font styles inline on each element, because <style> blocks in the head are stripped by Gmail (non-app) and some older clients. Images: <img> — works everywhere, but many clients block images by default until the user clicks "show images." Always include descriptive alt text and set width and height attributes to prevent layout shifts when images are blocked. Lists: <ul> , <ol> , <li> — work in most clients. Outlook adds extra spacing around lists that you can't fully control, but the content renders correctly. CSS Properties That Work These inline CSS properties are safe across email clients when applied directly to elements via the style attribute: Typography: font-family , font-size , font-weight , font-style , color , text-align , text-decoration , line-height — all reliable. Use web-safe font stacks: Arial, Helvetica, sans-serif or Georgia, Times New Roman, serif . Custom web fonts are ignored by most email clients. Box model: padding (on <td> elements), width (fixed pixels, not percentages on nested tables in Outlook), height , border — these work but test carefully. Use padding on table cells for spacing rather than margin , which is unreliable in Outlook. Colors: background-color (on <td> ), color — use hex codes ( #FF5733 ), not named colors or RGB functions. Some older clients don't parse rgb() or rgba() . CSS Properties to Avoid Layout: display: flex , display: grid , float , position — none of these work reliably across email clients. Outlook ignores them entirely. Use table-based layouts instead. Box model traps: margin (unreliable in Outlook — use table cell padding or spacer cells), max-width (Outlook ignores it — use fixed width ), box-sizing (inconsistent support). Visual: border-radius (ignored by Outlook desktop), box-shadow (ignored by most clients), opacity (inconsistent), transform (unsupported). These won't break your layout, but they'll be invisible to Outlook users — about 10-15% of business email opens. Selectors and blocks: <style> blocks in <head> are stripped by Gmail (web), some Yahoo clients, and older Android email apps. Always inline your styles. Media queries work in Apple Mail, iOS Mail, and Gmail app — but not in Outlook or Gmail web, so don't rely on them as your only responsive strategy. The Safe Email Skeleton Here's the minimal structure that works everywhere. Paste this into the HTML Previewer to see it rendered, then customize from there: <!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body style="margin:0;padding:0;background-color:#f4f4f4">   <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4">     <tr>       <td align="center" style="padding:20px 0">         <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="background-color:#ffffff">           <tr><td style="padding:30px;font-family:Arial,sans-serif;font-size:16px;color:#333333">             <h1 style="margin:0 0 15px;font-size:24px;color:#1a1a1a">Your Subject</h1>             <p style="margin:0 0 15px">Your content goes here.</p>           </td></tr>         </table>       </td>     </tr>   </table> </body> </html> Key details: the outer table spans 100% width with the background color, the inner table is fixed at 600px (the email standard), role="presentation" tells screen readers these tables are for layout not data, and all styles are inline. Testing Your Template Before sending, paste your complete email HTML into the HTML Previewer and toggle through the responsive breakpoints. Desktop width shows you the standard view. Mobile width (375px) shows you the worst case — what happens when the email client ignores your media queries and just renders at phone width. If it looks acceptable at 375px with no media queries, it'll survive any email client. That's the baseline. Media queries can enhance the experience for clients that support them, but the no-query version must work. Quick Reference Table Works everywhere: <table> layout, inline styles, font-family , font-size , color , background-color , padding on <td> , width (fixed px), border , text-align , line-height , <img> with width/height/alt. Works in most clients (not Outlook desktop): border-radius , background-image , media queries, <style> blocks, max-width . Avoid entirely: flexbox , grid , position , float , margin (use padding instead), CSS variables, calc() , web fonts, box-shadow . Bookmark this page for quick reference, and use the HTML Previewer to test every template before it ships. --- ## Reference - **Blog post:** https://procalc.ai/blog/html-email-template-cheat-sheet - **This markdown file:** https://procalc.ai/blog/html-email-template-cheat-sheet.md ### AI & Developer Resources - **LLM index:** https://procalc.ai/llms.txt - **LLM index (full):** https://procalc.ai/llms-full.txt - **MCP server:** https://procalc.ai/api/mcp - **Developer docs:** https://procalc.ai/developers ### How to Cite > ProCalc.ai. "HTML Email Template Cheat Sheet: Tags That Work Everywhere." ProCalc.ai, 2026-04-02. https://procalc.ai/blog/html-email-template-cheat-sheet ### License Content © ProCalc.ai. Free to reference and cite. Do not republish in full without attribution.