How to create beautiful HTML emails in MS Outlook
Ever wondered how people create those beautiful e-mails that popup in your Outlook mailbox every day? Emails that look like web pages. Emails that can be used for newsletters or marketing campaigns. You can do it too and it’s very easy to do. You would just need to know some HTML and have your beautiful images ready.
Inspecting the source code of an email in Outlook
You can start with looking at what and how others do. When you see an email in you Outlook’s Inbox that draw you attention you can easily inspect its "guts" – the source HTML code. In order to do this in Outlook 2013 (Microsoft Office 2013), open the email of your interest and click through Actions → Other Actions → View Source as shown in the following picture:
The HTML source will open in a Notepad window as shown in this picture:
Developing HTML code for emails
You can inspect that HTML code, explore, modify, and save it. You can also develop your own HTML code. Essentially, you develop HTML code for email the same way as you develop a webpage. There are, however, some rules for developing HTML pages for embedding them into Outlook email.
Outlook HTML rules
If you do not follow these rules, the inserted HTML code will not look right in the Outlook. So here are the rules:
- All links and images must use absolute URLs. Using relative URLs, something like
<img src="images/myimage.jpg">will not work, you have to use full URL like<img src="https://www.somedomain.com/images/myimage.jpg">. - Do not use external CSS files for styles; use either embedded CSS that is placed in the
<head>section of your HTML, or inline CSS. Avoid using background images in your CSS. - Do not use Javascript in HTML as it only works in web browsers, not MS Outlook.
- Outlook supports most, but not all HTML tags and attributes, so be warned.
Embedding HTML into Outlook email
When your HTML webpage is ready, you can embed it into Outlook email by clicking New Email → Attach File:
Then navigate to your HTML file, select the file (highlight it), and from the Insert drop-down box select Insert as Text:
Voila! - Outlook embeds your HTML file into the email body.
If you would like to delegate all or some of these steps - from creating images, compiling content or HTML, or conducting the whole e-mailing campaign - Lenetek will be happy to help.
Blog Home
Comments
Helpful insight.
I am using MS Outlook. The information above was just what I was looking for. However, in my Outlook version (365 latest) insert as text is not available in the dialog. Do you have a suggestion? Gerard
@Gerard Rozing - You will have to add it to the ribbon. Start a new email and then customise the ribbon. You need to choose 'Attach file' from 'HTML Emails' HTH - D
Hi, I am looking for way to embed HTML, and I am finding same process everywhere. However, I am following the exactly same steps, it isn't working for me. After the step "insert as text", the curser moves to next line and doesn't really show any HTML.
Payal, see the comment by David Wright above.
Unfortunalety I cannot insert as text either. Tried to customise the ribbon with what I think you meant, though my customisation choices do not match word for word. Anyhow, this does not work for me. Latest version of outlook, written January 2024.
Diane, see the comment by David Wright above.