Insert HTML Into Outlook

You are here: Email migration software for Outlook » Knowledge Base » Insert HTML Into Outlook

November 9, 2020

by Thomas

Outlook is notorious for its HTML rendering. The system is relatively hostile to the coding, which is why “Send HTML email Outlook” is a common search query. Given the variety of versions, how can you do it properly? Marketers adapt their messages to Outlook. This system is used by millions. You can be sure a share of your audience reads messages on Windows. Mail recipients are annoyed by broken links and missing images. These may trigger a flow of unsubscriptions. What started as a thoughtful marketing campaign may cause your audience to shrink. Plain text will not receive much attention. This is why professionals use HTML in Outlook. Colorful messages in HTML are now the marketing standard. If you have a template ready, it is easy to insert HTML into Outlook.

How to Put HTML in Email via Templates

The following sequence will help you insert HTML into Outlook 2016 and other versions. With a template, the process is quick and straightforward.

Open MS Outlook and go to the “Home” tab.
Click on “New Email” to create a new email message or use a Ctrl+N shortcut.
In the new email window, click on the “Insert” tab.
Within the “Insert” tab, click on “Attach File” or “Attach Item” (depending on your version of Outlook).
Locate and select the HTML file you want to insert into the email. Click “Insert” to attach the file.
Once the HTML file is attached, it will appear as an attachment at the bottom of the email.
Right-click on the attached HTML file and select “Save As” to save the file to a location on your computer.
Open the saved HTML file in a text editor or HTML editor.
Customize the HTML template according to your needs, adding images, text, and formatting as desired.
Once the HTML template is ready, select and copy all the HTML code.
Go back to the email message in Outlook and click on the “Insert” tab.
Within the “Insert” tab, click on “Signature” and then select “Signatures” from the drop-down menu.
In the “Signatures and Stationery” window, click on the “New” button to create a new email signature.
Give the new signature a name, and then paste the copied HTML code into the “Edit signature” box.
Click “OK” to save the new signature.
Close the “Signatures and Stationery” window.
To use the HTML template in a new email, click on the “New Email” button, and your signature with the HTML template will be automatically inserted into the message.
You can further customize the email if needed, add recipients, and send the email as usual.

Note: The steps provided might vary slightly depending on the version of MS Outlook you are using.

The attachment option may also be added to your Quick Access Toolbar. To do this, access options through “File“. You will see “Quick Access Toolbar” on the list on the left. Choose “Attach File“. This allows you to embed HTML in Outlook quickly.

Important Tips for HTML in Outlook

So, how can you make sure your message is not distorted? Here are a few tips from experts. These will prevent the most common problems like broken links and formatting disasters. Create HTML email in Outlook with these factors in mind.

1. Use Alt Text for Every Image

The mail client may block images. A possible solution is the addition of alt text. This is a simple word or phrase describing the image. If it is missing, the recipient can still read the description in the box and unblock it.

2. Make Sure Fonts Are Right

One major downside is that MS Outlook recognizes a limited range of fonts. Anything unfamiliar is automatically converted to Times New Roman, which may look awful. To be safe, use standard options like Courier, Arial, Veranda, or Georgia.

But what is your font that is part of the brand image? In this case, force the system to use an acceptable standard font instead of Times New Roman. This will serve as your fallback.

3. Tables Are Handy

This format helps to structure your message template. You can easily split content, choose backgrounds, style text, etc. Use tables to ensure all recipients see the same rendition regardless of their mail system. Remember to add align=”left” to make the message responsive. This way, boxes will be displayed conveniently on both wide and small screens. In the first case, they will be aligned next to one another. In the second case, they will be placed on top of each other.

4. Not Too Wide!

A rule of thumb is to stick to 550-600 pixels. This is because wider emails may be displayed incorrectly. Keep your messages narrow, so they can be viewed on any screen. There will still be enough space for an eye-catching design.

Testing is Crucial

Knowing how to send HTML email in Outlook is important. Do not forget to test your work before sending it. Check how it looks on every platform. This stage is worth your time, as it guarantees the right look.

More Knowledge Base articles

How to Open a MBOX File

March 9, 2024

An MBOX file is a mailbox format that stores email messages one after the other as a plain text. Each individual message within mbox file stored in EML format. If…

How to convert OST to PST using Outlook

January 19, 2024

An OST file, or Offline Storage Table file, is a type of file used by Microsoft Outlook to store a copy of mailbox information from an Exchange server. A PST…

How to Export Outlook Contacts for Further Use

January 4, 2024

For millions of users across the globe, Microsoft Outlook has become the service embracing business and private activities. Thanks to its functions, one may send emails, set meetings, keep track…

How to Merge Outlook PST Files

November 21, 2023

Microsoft Outlook users often have to deal with multiple PST files, especially if they have been using the program for a while. These files can become cluttered and difficult to…

Email Migration to Outlook – Answers to Common Questions

August 7, 2023

Email migration is a process of transferring emails and other data from one email platform to another. One of the most common email migration scenarios is moving from a different…

Hsu Yao Chang

July 14, 2023 at 7:50 am

Thanks, Alex,
I found some email content format got something wrong, such as font type is not correctly, but I don’t know what happen to it? For example, I found it’s original code by email, when I remove some tag, the font will change normal. But I don’t know why suddenly added these tags?

Alex Shipman

July 14, 2023 at 5:11 pm

Each case must be studied locally. Without having data by the hand, it is almost impossible to understand what exactly is going on in a particular case. It is better to contact the manufacturer of the email client so that they can diagnose and identify the problem. All I may do, it is suggest what may be wrong there. Here are few reasons why the email content in Outlook is formatted incorrectly:

Copying and Pasting: If you copied the content from another source (such as a website or another email), it may carry over the formatting and HTML tags associated with it. When pasting into Outlook, these tags can cause the font to appear incorrectly.
Forwarding or Replying: When forwarding or replying to an email, the original formatting and HTML tags may be retained. This can lead to inconsistencies in the font type and formatting if there are conflicts with the default settings in Outlook.
Email Templates or Signatures: If you are using email templates or signatures that contain specific HTML tags or formatting, they can affect the appearance of the email content. These tags might be added to maintain consistency or branding but can cause font changes if not properly handled.

To troubleshoot and address the issue, you can try the following steps:

Clear Formatting: If you notice incorrect font types, you can select the text and use the “Clear Formatting” option in Outlook to remove any unwanted HTML tags or formatting.
Paste Special: Instead of directly copying and pasting, use the “Paste Special” option in Outlook. This allows you to paste content without carrying over the formatting from the original source.
Plain Text Mode: Use the “Plain Text” mode in Outlook. This will remove all formatting, including HTML tags, and display the email content with a default font. However, keep in mind that this will also remove any formatting you may want to retain.
Review Templates and Signatures: If you have customized email templates or signatures, review them to ensure they do not contain any unwanted formatting or HTML tags that might affect the font appearance.

By taking these steps, you should be able to identify and rectify any formatting issues that may be causing the incorrect font type in your Outlook emails.

July 13, 2023 at 7:55 am

Hi,
I have condition as below: When user send email,it’s content use fonts 12, why after she sent the email, the fonts change 10? Thanks a lot.

July 13, 2023 at 5:12 pm

There could be a few reasons why the font size changes from 12 to 10 after sending an email in Outlook. Here are a few possibilities:

Outlook settings: The recipient’s email client or webmail service may have default settings that display the email content in a different font size. This is beyond the sender’s control, and the recipient’s email client will determine how the email appears.
HTML formatting: If the email was composed using HTML formatting, the recipient’s email client may interpret the HTML code differently and display the content in a different font size. This can happen if the recipient’s email client doesn’t support certain HTML tags or styles used in the email.
Plain text conversion: If the email is sent as plain text, the recipient’s email client may convert the email to its default font size, which could be different from what the sender originally set. Plain text emails don’t support font size specifications, so the recipient’s email client will determine the font size.

It’s important to note that once an email is sent, the sender has no control over how the recipient’s email client displays the content. Different email clients and devices may interpret the email formatting differently, leading to variations in font size, formatting, or appearance.