HTML code for Email
Räftegård, Elin avatar
Written by Räftegård, Elin
Updated over a week ago

HTML code for Email

This article is aimed to users that are familiar with HTML code: both advanced developers who have worked with code for emails, and those who need guidance.

This guide provides what you need to keep in mind!

In this Article

Best Practices

It is important to pay close attention when populating HTML code into the element, so that the code does not interfere with your Email.

Here's the best general advice we can give you when working with the HTML element in the Email editor:

  • Use simple inline CSS, and fonts that are safe for web. If an email client does not support a font, it will be replaced by a fallback font.

  • Any links included in the HTML element cannot be tracked by Google Analytics.

  • You may create static, nested and other HTML tables.

  • Mobile devices may have a hard time displaying your email properly. Respect the standard template width of 600px to 800px.

  • Pay special attention to your email's preview when using custom web fonts.

  • Background images, image maps and layouts that may be wider than your email's body should be used with caution.

  • If you plan on using embedded CSS, test your email in different email clients with Litmus to make sure that it works with the rest of your template.

Restricted Elements

The following elements are not supported or recommended when working with the HTML element in Apsis One.


JavaScript is a programming language that allows you to create interactive content. It is blocked by most email clients in order to avoid malicious content hidden in emails. You can use other strategies to make your email more appealing, like an outstanding design, captivating content and even GIF animations.


Flash refers to the animated content created with Adobe Flash. Most email clients block Flash.

Iframe Elements

An iframe is an HTML element useful for adding content from another website. It's blocked by most email clients due to the presence of scripts. If you must display content from another website, please add a link to an image that can bring Profiles into the website.


Very few email clients support HTML5 for the use of video and audio tags to embed media into emails. We suggest you try a link instead.


Unfortunately, in order to submit information that is entered in a form, you must use Javascript. Since Javascript is blocked by most email clients, it's best to avoid this practice.

Device Compatibility

Please make sure that the mobile version of your HTML element works as intended by using the Preview and Email Client Test features to double-check that it works in both desktop and mobile.

The rule of thumb is that you create content that is optimised for viewing in mobile, and content that is optimised for viewing in desktop. However, you can achieve maximum compatibility by following one of the following two methods:

  • Row visibility in HTML Code

  • Adjust Row visibility in Row Settings

1. Row visibility in HTML code

Instead of creating two rows with two HTML elements to enter your code, you may use Apsis One's default classes to display a row in different devices.

Take a look at this example.

2. Row visibility in Row settings

A very simple solution is to work with HTML code the same way you work with APSIS One's Design Panel elements.

Create two different versions of your email's HTML content, one for mobile and one for desktop. For optimal results, get in touch with your development or design team to make sure that your HTML code works as intended.

You can choose to show a Row in only desktop, only mobile, or show in both. Follow these steps to show your Row in only one device, but don't forget to make an alternative Row for the other device.

Here is how to:

1. Add a HTML element into the Canvas and paste the HTML code for the desktop or mobile version of your email.


These are the elements that the Email editor supports when hiding or showing Rows in different devices. If you intend to use an element that is not listed below, simply test your email with Litmus to make sure it's hidden.

}.hide, .hide th, .hide table, .hide tr, .hide td, .hide div, .hide a, .hide img, .hide span { display: none !important; line-height: 1px !important; max-height: 0px !important; max-width: 0px !important; opacity: 0 !important; overflow: hidden !important; mso-hide: all !important; }

2. Click the Row in the Structure panel to open the Row Settings.


3. The Row Settings will open.

It's a good idea to give your Row a name so that you can see this row is the one with your desktop or mobile HTML code in the Structure Panel.


4. Click the mobile or desktop icon to choose which device this Row should be shown on.

Repeat this step for the other device's version, or perhaps a version that works well in all devices.



If you decide to use images in your HTML code, use images hosted in your own server in order to ensure that they're available at the time of sending. If later you choose to replace an image that is being used on your HTML element, you must double-check that the new image has the same dimensions not to disrupt your HTML code.

When it comes to the dimensions of images in HTML, we recommend that you add their width as an inlined style for your emails to work optimally in Outlook.

Also, consider that your recipients will have to load all the content of your email in order to view it, and those with slower connections as well as restricted data plans on their mobile devices may be affected. Whereas the average image file size tends to be around 2MB and 2.5MB, we recommend that you keep the file size at 1MB or under.

This is also applies to the Image element in the Email editor, since you have the possibility to add an image via a URL.



Our Email editor has a default stylesheet for how the Canvas renders all of the elements available in the Design Panel. When writing HTML code for your Emails, it's good to have in mind how this stylesheet looks like so that you can write code that works flawlessly.

Here are the classes you can use in your code:

  • General classes
    Remove client-added padding to images
    Show element as 100%

  • Mobile classes
    Show row in mobile, add to surrounding table
    Hide element in mobile

    .m-show / .m-block
    Display element as block
    Display element as table
    Display element as inline
    Display element as inline-block

    Remove elements all padding
    Add 10px padding-bottom

    Show element as 100%
    Show element half width

    Align center

Next Step

Did this answer your question?