How to Send an HTML Email from Outlook or Gmail

Why pasting the code sends the code

The compose box in Outlook and Gmail is a rich-text editor, not a code editor. Whatever you paste as text stays text, angle brackets included. There are two ways around it: load the file into the body with a command that reads it as HTML (only Outlook Classic has one), or render the file in a browser and copy the result, which every app accepts.

Either way, the editor rebuilds your HTML in its own terms before it sends anything, and the recipient's email client then applies its own rules on top. Why the same email looks different in every inbox is covered in the HTML email guide.

Outlook Classic for Windows: Insert as Text

Outlook Classic, the desktop app in Microsoft 365 and Office 2016 and later, can still read an HTML file straight into the message body. The command is hidden: the default Attach File button on the Message tab only attaches files or shares cloud links. The older command with the same name has to be added once.

1. Open a new message, right-click the ribbon and choose Customize the Ribbon. Add a custom group to the message tab. (Or right-click the Quick Access Toolbar and choose Customize Quick Access Toolbar.)
2. Set Choose commands from to All Commands and add Attach File, the entry without the ellipsis, not Attach File.... Click OK.
3. In the message, open the Format Text tab and make sure HTML is selected as the format.
4. Click the Attach File button you added and select your .html file.
5. Click the arrow next to Insert and choose Insert as Text. The file is rendered into the body instead of attached.

If Insert as Text is missing from that menu, an add-in may have taken it over: one Microsoft Q&A thread traced it to a Mimecast add-in that replaces the option with Open.

This is the most faithful of the methods here, but Outlook Classic still converts the body through Word's HTML engine, which ignores much of modern CSS. What survives is in the Outlook CSS guide.

New Outlook for Windows and Outlook on the web: copy and paste

The new Outlook for Windows and Outlook on the web have no Insert as Text and no HTML source view. A Microsoft MVP put it plainly on the Tech Community forum: new Outlook doesn't support it, and new Outlook is Outlook on the web in an app frame, so the same answer holds for both.

The workaround Microsoft's own community moderators give:

1. Open the HTML file in a browser.
2. Press Ctrl+A to select the whole page and Ctrl+C to copy it (Cmd on a Mac).
3. Click into the body of a new message and paste with Ctrl+V.

Expect losses. The same moderator warns that some advanced formatting may be stripped and advises inline CSS and basic HTML; users in that thread report the pasted layout does not match the file. Text, links, tables and images loaded from the web come through best. Anything that depends on a <style> block or on how the browser sized the page is the first to go.

Gmail: paste the rendered page, or edit the compose body

Gmail on the web has a formatting toolbar and a plain-text mode, and nothing that shows or accepts HTML source. First check the message is not in plain-text mode (under More options at the bottom of the compose window), or everything you paste is reduced to text.

Paste the rendered page. Open the file in Chrome or another browser, select all, copy, and paste into the compose box, the same as in new Outlook. It is quick and works for simple layouts.

Replace the compose body with your HTML. This puts your markup in directly instead of whatever the browser chose to copy. In Chrome:

1. Open a new message, right-click inside the body and choose Inspect.
2. In the Elements panel, find the div with contenteditable="true", the element that holds the message body.
3. Right-click it, choose Edit as HTML, and replace everything between its opening and closing tags with your email's body markup.
4. Press Ctrl+Enter (Cmd+Enter on a Mac) or click outside the editor. The compose window now shows the rendered email.

You are replacing the inside of a div, so your <head> and anything in it is left behind, and Gmail filters the markup again when the message is sent. Gmail does not support a stylesheet in the head reliably either: <style> is partly supported in Gmail. What its sanitizer keeps and removes is in the Gmail HTML email guide.

Browser extensions that add an HTML editor to Gmail exist too. They do one of these two things for you, and they get access to your mailbox, so check who makes one and what it can read before you install it.

What breaks with every method

• Styles in the head. Copy-paste and the compose-body edit both leave the <head> behind, and with it any <style> block. A linked stylesheet fares worse in the inbox anyway. For <link>: Works in 3 of 21. Not supported in Gmail, Gmail Android, Gmail iOS and 15 more. Put the CSS on the elements before you send.
• Images on your disk. An image that shows in your browser from a local path will not exist on the recipient's machine. Every src must be an absolute https URL.
• Layout that depends on the browser. Your browser renders everything, so the preview proves little. display:flex is not supported in Outlook Classic. @media is not supported in Outlook Classic. Table-based layouts survive the trip best.
• Fonts. A web font loaded in your browser shows in the preview and can be gone in the inbox: @font-face is not supported in Gmail. Set a fallback stack you are happy to see.

<!-- Breaks: the recipient's computer has no C: drive of yours -->
<img src="file:///C:/Users/me/newsletter/header.png">
<img src="images/header.png">

<!-- Works: an absolute https URL anyone can load -->
<img src="https://example.com/newsletter/header.png"
     width="600" height="200" alt="Spring sale">

Before you press send

1. Inline the CSS. Paste the file into the CSS inliner so every style sits on its element, where Outlook and Gmail are most likely to keep it. Why that matters is in CSS inlining for email.
2. Check what each client supports. Run the inlined HTML through the HTML email checker to see which properties Outlook, Gmail and the rest will drop.
3. Send a test to yourself. Open it in the app your readers use, on desktop and phone. What you see in the compose window is not what arrives. The full routine is in how to test HTML emails.

When to stop using your own inbox

Sending from Outlook or Gmail is fine for a test or a note to a few dozen people. Both cap it: a personal Gmail account can hit its limit after more than 500 recipients in one message or more than 500 emails in a day. Outlook.com allows Microsoft 365 subscribers 5,000 recipients a day, 500 per message and 1,000 a day to people you have never written to, and less for everyone else.

Long before those limits, a newsletter from a personal inbox lacks what a list needs: an unsubscribe link, bounce handling, and recipients who cannot see each other's addresses. An email service sends the same HTML without the copy-paste step, so the file you tested is the file that goes out.