Why does your beautifully designed HTML newsletter render as plain text in Outlook? Why do background images vanish when you forward an email? Why does a colleague see perfect spacing while yours collapses into a single column?
Quick Answer
Yes — Outlook does support HTML. But it’s not the HTML you learned in web dev class. Desktop Outlook (2016, 2019, 365) uses Microsoft Word’s rendering engine — not a web browser — so CSS support is extremely limited, inline styles are mandatory, and many modern HTML tags simply get stripped. Outlook on the web (OWA) uses Edge/Chromium, so it handles HTML far better — but still strips some attributes for security. The short version: You can send HTML emails, but you must code them like it’s 2004.
All the Methods
| Method | Steps | Best For | Limitations |
|---|---|---|---|
| Paste HTML directly | Copy raw HTML → Ctrl+V in new message → Outlook auto-converts to rich text | Quick one-offs, internal comms | Strips <style>, most class attributes, flexbox, grid, external fonts |
| Insert → HTML File | Insert tab → Attach File → browse to .htm or .html → select "Insert as Text" | Reusing templates, consistent branding | Only works in desktop Outlook (not OWA); ignores embedded CSS unless inline |
| Send via third-party tool (e.g., Mailchimp) | Design in editor → test preview → send through SMTP relay | Marketing emails, newsletters, external campaigns | Not native Outlook — bypasses Outlook’s renderer entirely; requires external account |
| Compose in Word, paste to Outlook | Build layout in Word → copy all → paste into Outlook message body | Internal reports, formatted memos, legal docs | Word’s formatting translates more reliably than raw HTML; but loses hyperlinked images and SVG |
| Use Outlook Web App (OWA) editor | Open outlook.office.com → New Message → use toolbar or paste HTML | Quick edits, remote access, Teams-integrated workflows | Supports more modern CSS (e.g., display: inline-block) but still blocks @media queries and position: fixed |
Method Details
Paste HTML directly (desktop Outlook)
This is the most common mistake people make — and the one that causes the most frustration. You build a clean, responsive HTML email in VS Code. You copy the entire <body>. You paste it into Outlook. And suddenly, margins vanish, columns stack vertically, and your branded header disappears.
Here’s what actually happens: Outlook’s Word-based editor parses your HTML, then rebuilds it using its own proprietary RTF-like structure. Any <style> block? Gone. Any margin or padding set via CSS class? Replaced with table-cell padding or ignored. Even basic things like <div> become <p> or <span>.
I’ve seen this trip up even experienced users. One client spent two days debugging why their 'Weekly Sync — Product Team' email looked fine in Gmail but collapsed in Outlook. Turned out they’d used flex-direction: column — unsupported in Word’s engine. Switching to nested tables fixed it instantly.
Insert → HTML File (desktop Outlook only)
This method works — but only if your HTML file follows strict rules. It must be self-contained: no external CSS, no JavaScript, no relative image paths. All images must be embedded as base64 or hosted publicly with absolute URLs.
To try it: Save your HTML as weekly-sync.htm. In Outlook, go to Insert tab → Attach File → find the file → click the dropdown arrow next to Insert → choose Insert as Text. Don’t just double-click — that attaches it as a file.
This method preserves inline styles and basic table layouts. It’s how our team sends the 'Budget Review Q3' summary every quarter. But it fails silently if your HTML includes unsupported elements — like <svg> or <picture>. Those get dropped without warning.
Compose in Word, paste to Outlook
This is my go-to for internal comms. Word’s rendering engine is nearly identical to Outlook’s. So if it looks right in Word, it’ll look right in Outlook — 9 times out of 10.
Build your layout using Word’s built-in table tools and font controls. Use Word’s ‘Design’ tab to add borders, shading, and hyperlinks. Then copy the whole thing (Ctrl+A, Ctrl+C) and paste into Outlook (Ctrl+V). No need to tweak anything.
Surprising tip: Word handles text-align: justify better than raw HTML pasting — and retains bullet spacing that Outlook otherwise flattens. Try it with '1:1 with Manager' notes next time.
Keyboard Shortcuts
| Action | Shortcut | Alt Sequence | Notes |
|---|---|---|---|
| Paste unformatted HTML | Ctrl+Shift+V | Alt+H, V, T | Removes Word’s auto-formatting — critical for clean HTML paste |
| Open Insert tab | Alt+N | Alt+N | Then press A for Attach File |
| Toggle HTML source view (OWA) | Not available | N/A | OWA has no HTML editor — paste triggers auto-cleanup |
| Apply bold to selection | Ctrl+B | Alt+H, B | Works identically whether pasted from HTML or typed |
Cheat Sheet
| What Works | What Doesn’t | Desktop Outlook Version Notes |
|---|---|---|
Inline style="" attributes |
External or embedded <style> blocks |
Outlook 365 updates monthly — minor CSS improvements, but core Word engine unchanged |
| HTML tables for layout | CSS Grid or Flexbox | Outlook 2016 and later support border-collapse: collapse; earlier versions don’t |
| GIFs and JPEGs (absolute URLs) | SVG, WebP, or base64-encoded images | OWA supports WebP; desktop Outlook does not |
Basic <a href=""> links |
JavaScript event handlers (e.g., onclick) |
All versions strip JS — even in OWA — for security |
Font-family fallback stacks (e.g., Arial, sans-serif) |
Google Fonts or @import |
Outlook 365 supports font-feature-settings in limited cases — but don’t rely on it |
<hr> with inline height/color |
CSS border-bottom on <div> |
Outlook 2019 added support for height on <hr> — finally |
