Skip to content

Everything for WordPress, web development — and beyond

📧 How to insert HTML into Outlook Web email: working method in 2026

📧 How to insert HTML into Outlook Web email: working method in 2026

You built an HTML email with tables, buttons, and a corporate logo, but Outlook Web turns it into a mess of angle brackets. Ctrl+V strips the markup and shows bare <td> and <div> instead of your design. There's no "paste HTML" button in the browser version, and there never was.

A workaround exists and takes a couple of minutes: a unique marker in the message body plus browser DevTools. No extensions, no API, no developer account.

One caveat upfront that most guides skip: Microsoft does not document or support this method. It relies on the message input field being an ordinary contenteditable block rather than a protected component. It's worked for years, but Microsoft gives no guarantees. That's why this article includes a mandatory "send a test to yourself" step and a section on official 2026 alternatives.

💡 Quick overview:

  • Create a draft in Outlook Web and type a unique marker ForHTMLEmail in the body
  • Open DevTools (F12), find the marker in the DOM search and select Edit as HTML
  • Replace the marker with your target HTML code and press Ctrl+Enter
  • Send the email to yourself. Make sure the markup reaches the recipient before you send it to anyone else

What changed by 2026

Five-year-old instructions are outdated in three important ways. Before you open DevTools, understand the new landscape.

New Outlook is Outlook Web. Microsoft is replacing the classic Outlook for Windows with "new Outlook" (project Monarch). Technically it's a native wrapper on WebView2 that runs the same web interface inside. The practical takeaway: the technique described below applies not only to the browser but also to the client Microsoft is steering all users toward.

Classic Outlook is still alive, but dying. Microsoft promises to support existing classic Outlook installations at least until 2029, and forced migration has been postponed: no earlier than 2027-2028. Office 2016 and 2019 lost support on October 14, 2025, Office 2021 on October 13, 2026.

"Insert → File as text" exists only in classic. The old way to paste HTML without DevTools (the "Attach file" button → "Insert as text") remains, but only in classic Outlook, and the button must be manually added to the Quick Access Toolbar. In new Outlook and the browser version this option doesn't exist at all. All recipes involving VBA macros and COM add-ins are dead too: they don't work in new Outlook.

Warning, trap ahead. In the desktop new Outlook you can no longer open DevTools: the olk.exe --devtools command was intentionally disabled. Do everything in the browser, on outlook.live.com or outlook.office.com.

What you need

  • A Chromium browser. Chrome, Edge, Brave, Opera, Vivaldi. In Firefox the mechanics are the same, only the tab is called Inspector.
  • An Outlook account. Personal outlook.live.com or work outlook.office.com, the mechanics don't differ.
  • Ready HTML with inline styles. Keep the source in a separate file: if the tab closes, the process takes half a minute to repeat.

Why inline styles and tables are still mandatory

The temptation is strong: since new Outlook runs on Chromium, you can layout with flexbox. Not so fast.

The email is rendered by the recipient's email client, not yours. While classic Outlook is alive (and it's alive until 2029), some addressees open emails with the Word engine: no flexbox, no CSS Grid, no background images, no web fonts, and margin is ignored. Even where display: flex formally passes, accompanying properties (flex-wrap, align-items, justify-content) are stripped by most clients.

The 2026 conclusion hasn't changed: table layout, inline styles, fixed 600-pixel width. External <style> blocks and <link rel="stylesheet"> are ignored by Outlook Web.

1. Create a draft and place a marker

Open Outlook Web, click "New message". Don't fill in the subject or recipients yet, this is insurance against accidentally sending a draft with the marker.

Click in the message body and type exactly one word: ForHTMLEmail. No spaces or quotes, case matters. The marker must be the only content in the body: a unique character combination guarantees that the search will land in the message body and not in an interface element.

New message window in Outlook Web: message body is empty, subject and recipients are not filled in

2. Find the marker in the DOM

Without closing the message window, press F12 and go to the Elements tab.

DevTools panel open over Outlook Web: Elements tab with the message DOM tree

Press Ctrl+F inside the DevTools panel (not on the page), a DOM search will open. Type ForHTMLEmail and press Enter. DevTools will highlight the needed node: usually a <div> or <p> nested several table levels deep. Find the element where ForHTMLEmail is direct text content, with no child tags.

3. Replace the marker with HTML

Right-click the found element and select Edit as HTML. Or press F2 on the selected element, faster.

The edit field will expand: you'll see something like <p>ForHTMLEmail</p>.

Select all field content and delete it. This is the key moment: if you don't erase the old content, the HTML will overlay the marker and you'll get a mess.

Edit as HTML mode in DevTools: HTML email code pasted in place of the marker

Now paste your code with Ctrl+V. Don't click outside the field with the mouse, this will close the edit mode before committing the change. If DevTools colored the tags and showed nesting as a tree, the code was perceived as markup, not plain text.

Press Ctrl+Enter. Return to the message window: the layout should render right in the body, images, tables, background, buttons.

Finished HTML email rendered right in the Outlook Web message body: tables, images and button

4. Mandatory test before sending

This step gets skipped, and then people send clients an empty email. The method is unofficial, so trust but verify.

  • Send the email to yourself. Enter your address, send it, open the inbox. Only then will you be sure that the modified DOM actually went to the server and didn't remain a local browser illusion.
  • Open it on a phone and in another client. At least in Gmail. If the layout broke there, it will break for half your addressees.
  • Look at it without images. Outlook blocks external images by default. The email must remain readable: alt texts, background colors, no text as image.
  • Only now fill in recipients and subject.

Stewart Gauld shows what the entire process looks like in one run. The video was recorded before new Outlook appeared, but the marker mechanics and Edit as HTML haven't changed since then.

Official alternatives if DevTools isn't an option

The DevTools method costs nothing, but it's unofficial and requires hands-on work. If you need to paste HTML regularly or a non-technical person will be doing it, there are legal paths in 2026.

Method

Suited for

Nuance

Outlook add-in (Office.js body.setAsync)

Developers

Official API, 1,000,000 character limit per insert. Works in both web and new Outlook

Ready-made add-in from AppSource ("Insert HTML by Designmodo")

Non-technical users

Microsoft-verified, installs from the store. Main DevTools replacement

Browser extension (HTMaiL)

Those who live in the browser

Third-party, ~30,000 users. Evaluate risks: extension gets mail access

Microsoft Graph API (sendMail, contentType: HTML)

Automation and bulk mail from code

Requires token. Unsafe HTML filtered by default

Classic Outlook: "Insert as text"

Those still on classic

Button must be manually added to toolbar. No method in new Outlook

Separately: the built-in "My Templates" for HTML won't work, they save only text, without formatting and images.

2026 pitfalls

  • Scripts won't pass. Microsoft strips potentially dangerous HTML, <script>, forms, interactivity. This isn't 2026 news, it's XSS protection, and you can't bypass it via DevTools either: filtering happens on the server.
  • Email size. Keep HTML within 80-100 KB. Gmail clips messages at roughly 102 KB and hides the rest behind a "Show entire message" link.
  • Dark theme. Outlook.com partially inverts colors itself. Add <meta name="color-scheme" content="light dark"> and <meta name="supported-color-schemes" content="light dark">, but there's no bulletproof way to prevent inversion, Microsoft itself acknowledges this.
  • Cyrillic. Put <meta charset="UTF-8"> at the start of the template, or you'll get gibberish.
  • Plain text version. Through DevTools you don't control the plain-text part: Outlook will generate it itself from the HTML. For critical mailings this is an argument in favor of a proper mailing service.

⁉️🤔 Frequently asked questions

Why doesn't Outlook Web let you paste HTML directly?

With regular Ctrl+V the browser passes data as text/plain, not text/html, this is protection against malicious markup injection. DevTools bypasses the barrier because it modifies the DOM directly, and the message input field is an ordinary contenteditable block. Microsoft isn't hiding any "secret button": an official way to paste arbitrary HTML in the web version simply isn't provided.

Does the method still work in 2026?

Recent guides from 2024-2025 describe it, and there are no visible technical changes that would break it. But Microsoft doesn't document the method and doesn't promise to support it: the Outlook Web editor is built on RoosterJS with an internal content model, and theoretically it could overwrite the pasted HTML. That's exactly why the "send the email to yourself" step isn't optional. Checked it, send it.

Does this work in new Outlook for Windows?

In the desktop application itself, no: DevTools were intentionally disabled there. But new Outlook is a wrapper over the same web interface, so just open outlook.office.com in a browser, compose the email there and send it. The result is identical.

Will the HTML be saved if you close the draft?

No. The edit lives in the current tab's DOM. The modified body goes to the server only when sent (or when the draft auto-saves, but don't count on that). Close the tab and you'll have a draft with the ForHTMLEmail marker. Keep the source HTML in a file.

Can you now layout emails with flexbox since new Outlook is on Chromium?

No. Your client doesn't decide what will render the email for the recipient. While classic Outlook with the Word engine is alive (and Microsoft supports it at least until 2029), some addressees will see broken layout. Tables and inline styles remain the standard at least until the end of the decade.

HTML won't paste, what to check?

Three typical causes. First: DevTools doesn't find the marker, typo or extra space, retype ForHTMLEmail from scratch. Second: a pile of tags in the email, you didn't erase the field content before pasting, press Ctrl+Z and repeat. Third: after Ctrl+Enter the email is empty, DevTools rejected the edit because of a markup error (unclosed tag, unpaired quote). Run the code through W3C Validator.

Bottom line: two rules that decide everything

The entire process fits in a chain: marker → F12 → find in DOM → Edit as HTML → paste → Ctrl+Enter → send to yourself → check → send out.

Two rules without which the method fails:

  • Test to yourself is not optional. The method is unofficial. Until the email arrived in your inbox in normal form, assume it doesn't work.
  • Tables and inline styles. Chromium under the hood of new Outlook doesn't cancel classic Outlook at the recipient's end.

If you paste HTML every week, look at the add-in from AppSource: it does the same thing but legally and in two clicks. For one-time tasks DevTools is still fastest.

What emails do you send through Outlook Web and how often does the layout break for recipients? Write in the comments.