Blog

What HTML elements can I include in my emails?

Last updated: October 5, 2024

To attract attention, your emails need to catch the audience’s eye right away. 

Interactive elements go a long way toward helping you do that. But certain HTML elements make your emails harder to read and worse, could expose your recipients to malware. As a result, many of them are blocked by major inbox service providers. 

At best, this makes your emails harder to read and hurts your engagement numbers. At worst, this makes inbox providers like Google and Yahoo think you’re spamming your audience. That hurts your sending reputation, inbox placement and ultimately, your connection with your audience. 

Stay ahead and read our Q2 2024 email engagement report to uncover trends & best practices for success:

Work Email *

First Name *

Last Name *

Company *

Job Title *

Read Now

So what HTML elements are ok to include in your emails? What should you leave out? That depends (somewhat) on each email client. 

In this guide, learn what content types to avoid in your emails — and what you should use instead. 

What HTML elements can I use in email? 

Safe to use

• Static, table-based layouts
• HTML tables and nested tables
• Template width of 600-800px. 
• Simple, inline CSS styling (for more detail, consult this list of universally supported HTML and CSS designs for email) 
• Web safe fonts like Times New Roman, Arial or Sans Serif  

Use with care

Not all ISPs support these content types, so thoroughly test them on multiple ISPs and device types before sending your campaign. 

Background images

On Omeda, you can add background images to your emails by coding into your HTML. 

As long they’re not hosted on a blacklisted hosting domain, background images don’t directly impact deliverability. But if your images take too long to load, they can keep people from engaging with your emails. Inbox service providers will see that your subscribers are having a bad inbox experience and, if it goes on too long, start sending your emails to spam.

Keep your emails under 100 KB so your messages don’t get clipped in Gmail and you don’t experience deliverability issues. Also aim for a 60:40 image-to-text ratio in your emails to ensure your whole audience can see them. 

And when you’re testing new background images, test them across light and dark mode, mobile and desktop devices, and multiple ISPs before sending it to your final audience. (Note: If you’re an Omeda client, consult your Opens by Device report to see which devices and ISPs your audience uses most, then adapt your design to those requirements.)   

Custom web fonts 

You can use two different classes of fonts in your emails: standard or web (custom). Standard fonts are default options that are available across most systems and devices (like Times New Roman or Arial). Use this in your emails and everyone will see the intended font. 

Web fonts aren’t available on every system, but they are supported by some of the most common inbox service providers, including Apple Mail, Outlook 2019, Outlook app and Android Mail (but not Gmail). If you use web fonts, many but not all of your clients will be able to see the intended font. 

If you’re using web fonts, choose a fallback font so that people viewing your email on an unsupported ISP will still see your message. Or verify that your email provider will replace your font with an alternative font for these recipients. (On Omeda, we BLANK If a recipient’s ISP doesn’t support your custom font, we’ll replace it with one of the standard options instead. 

Wide layouts

Like background images, overwide layouts (more than 800px) make your emails less accessible. That’s especially true for mobile users, who  will need to scroll left to right to read your content. Most times, they’ll click away instead. If enough of your users do this, ISPs will see that readers are clicking away from your emails and start sending your emails to spam. 

From a usability perspective, it’s better to make your emails too long rather than too wide. So use a single column layout in your emails whenever possible.

This way, you can include more content in your messages without hurting your readability or keeping mobile readers from accessing your email. Also keep your layouts less than 800px wide whenever possible. If you must exceed that limit, test your emails across multiple devices and ISPs to ensure it renders appropriately for the majority of your users. 

Embedded CSS

Marketers have turned to embedded CSS to make their emails more mobile-friendly and responsive. However, embedded CSS codes are determined in one place of an email, generally in the <head> section as a <style>. Some email servers still strip the information out of this section, which can distort your email’s styling. 

Before launching a campaign, test your external CSS elements across multiple device types and email providers. 

Do not use

Javascript

Publishers use Javascript on their websites to make their content more engaging. But it’s often used to hide malicious content on email, so most inbox service providers block it. Using it in your emails will get your emails marked as spam — and threaten your deliverability long-term. 

The workaround: Consider using GIFs or embedded videos to make your emails more interactive. 

<iframe>

An iframe is a piece of HTML code that displays one webpage directly onto another webpage. This is most commonly used to embed YouTube videos, social media posts, and/or Google maps onto articles. 

But as with Javascript, ISPs block iframes for security reasons. Since they pull data from other websites, iframes provide a backdoor for malicious code to enter your emails and make your audience vulnerable to cyberattacks. Putting <iframe> in your emails will hurt your sender score and ultimately your deliverability. 

The workaround: Use pure HTML to include your desired content in your email or link out to it.  

Embedded audio 

Most inbox service providers can’t play an audio file directly in an email. 

The workaround: Link out to these files in your campaigns. 

Forms 

While you can embed a form into your email, we don’t recommend it.  First, your form’s formatting and functionality could change depending on the recipient’s inbox service provider used. Unless you test it on every single device your audience uses, you can’t guarantee that your audience will be able to complete it. 

Your users also might receive security warnings from their inbox service provider, which will dissuade them from completing your form. If enough of them report spam complaints, your deliverability will suffer as well. (And at that point, not having enough survey responses will be the least of your concerns.) 

The workaround: We recommend linking to a form on an external website rather than embedding it in an email. This is the safest and most effective way to share a form with your audience. More people will be able to complete it and you 

<div> layering

<Div> tags make it easy to separate website elements and make your webpages easier to read. Unfortunately, most email providers haven’t changed their systems to support these tags. So using them in email can result in padding issues, with text located too far away from your images. Or your text could be placed too close to your images and become impossible to read. 

The workaround: Use <table> tags to separate elements in your email instead. 

Subscribe to our newsletter

Sign up to get our latest articles sent directly to your inbox.

Email *

Subscribe