Respecting HTML rules

In order to guarantee the correct functioning of your HTML file, there are some rules and good practices that should be observed.

Actito Editor

Some good practices are strictly enforced by the Actito HTML editor.

Therefore, it will not be possible to import an HTML file or to code it directly if the following constraints are not respected.

These constraints are also applied for the creation of custom templates by our design teams.

Business constraints

Maximum 255 characters in link title

The HTML attribute title of a link (<a> tag) can only contain a maximum of 255 characters.

The role of the title attribute is to add some additional information to the link, not to provide an exhaustive description. As such, it should be brief, otherwise it will prevent the import of the HTML file.

images/download/attachments/650477702/image2021-10-13_15-21-33.png

Example of incorrect code
<a title="Zijdezacht satijn, borduurwerk met mysterieuze bloemen: ontdek onze nieuwe lingeriecollectie ge&#239;nspireerd op de verrukkingen van de Tuin van Eden. Trek deze weelderig bedrukte neglig&#233; aan en laat de delicate visnetten uw rondingen sublimeren. Bij ons draait alles rond orde en schoonheid, luxe, rust en wellust." href="https://www.actito.be/nl_BE/bh-s-hot-now-essentials-1" target="_blank">

Missing attachment

As explained in the HTML import modal window, images used in the e-mail can be referenced :

  • either by including absolute links (images hosted on a third-party server), in which case uploading an HTML file alone is enough

  • either by including a folder containing the images within a zipped file which also contains the HTML file (one per language)

In the second case, images can be inserted with a relative reference (ex. src="folder_Name/Image_name.jpg").

If the HTML references an image that's not in the image folder (or in another folder, or if the name of the image/folder is wrong), you will encounter an "referenced attachment missing" error, with the reference of the missing image.

images/download/attachments/650477702/image2021-10-13_15-29-6.png

Example of incorrect code
<img src="img/640x125.png" width="640" border="0"
style="width: 640px; display: block; border: 0;" data-actito-img="" class="act-img">

CSS constraints

No relative links

External stylesheet referenced in the HTML tags <link> cannot be referenced as relative links.

All links must be absolute URLs, otherwise the resource will be considered as missing.

images/download/attachments/650477702/image2021-10-13_15-50-46.png

Example of incorrect code
<link rel="stylesheet" href="/build/actito-style.aaae10e3.css">

Astuce

Images used in the e-mail can be referenced as a relative link and stored in a folder of the zipped file that contains the HTML (see previous rule).

However, in the case of stylesheets in the CSS rules, only absolute links are allowed.

CSS rule formatting error

CSS rules found in the <style> tags must be formatted correctly. A CSS rule consists in a selector and a declaration. The selector points toward a HTML element, while the declaration contains the name of the propriety and the associated value (ex.: property: value;).

If a CSS rule is not valid, the invalid token will be highlighted by the Actito validator, and the possible valid notations will be presented.

Good to know

The number of the line in error is related to the <style> tag in which the invalid rule is found, not the HTML as a whole.

If there are several <style> tags in the <head> of the HTML, lines will be counted separately for each of them.

In the following example, the td at line 21 (of this specific <style> tag ) .root.one-cols>tbody>tr>td>{width:660px} should not be closed and causes an error.

The correct syntax is .root.one-cols>tbody>tr>td{width:660px} .

images/download/attachments/650477702/image2021-10-13_16-1-33.png

Example of incorrect code
<style type="text/css" id="editor_required_emailwidth" ee-render="inline">.email-full-width{width:100%}
.email-body{min-width:100%}
.email-width{max-width:660px}
.row{max-width:660px}
.row.one-cols{max-width:auto}
.row .row{max-width:100%}
.row .row .row-inner{border-width:0;padding:0 0}
.row .row .row-inner.ee_basketcontent,.row .row .row-inner.ee_productcontent{padding:10px}
.ee_dynamic .row-inner.element-pad{padding:0 10px}
.col-inner{border-width:0;padding:0}
.sub-sub-col-inner{border-width:0;padding:0}
.element-pad{padding:10px}
.element-pad.root-element-pad{padding:10px 20px}
.el-pad{padding:10px}
.el-pad.root-el-pad{padding:10px 20px}
.row-inner{border-width:0;padding:0 10px}
.row-inner.ee_basketcontent,.row-inner.ee_productcontent{padding:10px}
.element-bord{border-width:0}
.el-bord{border-width:0}
.one-cols>tbody>tr>td>.no-stack-column,.one-cols>tbody>tr>td>.stack-column{width:100%;min-width:100%;max-width:640px}
.root.one-cols>tbody>tr>td>{width:660px}
.two-cols>tbody>tr>td>.stack-column{max-width:50%;min-width:100%;width:50%}
.two-cols>tbody>tr>td>.no-stack-column{min-width:50%;max-width:50%;width:50%}
.three-cols>tbody>tr>td>.stack-column{max-width:33.333%;min-width:100%;width:33.333%}
.three-cols>tbody>tr>td>.no-stack-column{min-width:33.333%;max-width:33.333%;width:33.333%}
.four-cols>tbody>tr>td>.stack-column{max-width:25%;min-width:100%;width:25%}
.banner-padding{padding:0 0}
.hero-image-padding{padding:0 0}
.background-image-txt-mso{width:680px;height:175px;background-position:center center!important}
.bg-img-txt-width{max-width:500px}
.bg-img-txt-text{padding:0 0}
.col-font-reset,.ee_element,.font-reset{min-width:100%}
.button-wrapper{min-width:auto}</style>

Parsing constraints

"Unexpected character" error

An unexpected character in the middle of HTML tags can block the rendering of the e-mail.

An 'unexpected character' can be understood as the following:

  • an extra character in the code. For instance, 2 double quotes one after the other can displace the parsing of the e-mail.

  • on the contrary, missing quotes can also displace the parsing of the e-mail.

  • or other missing characters in the code. If in the fragment href="https://www.actito.com", the sign "=" is missing, the quote just after the href will be considered as unexpected.

images/download/attachments/650477702/image2021-10-13_16-2-13.png

This example signals an error because of an invalid character at line 243. The column specifies the position of the character in the line.

We notice that the sign "=" is missing following the href, which means that the link tag is not valid.

Example of incorrect code
<h2 align="center" style="color: #000000;font-family: Arial;font-size: 20px;mso-line-height-rule: exactly;line-height: 114%;font-weight: bold;font-style: normal;text-transform: none;margin-top: 0.5em;margin-left: 0;margin-right: 0;margin-bottom: 0.5em;text-align: center;"><font color="#ffffff"><a data-order-id="28" target="_blank" style="color: #FFFFFF;font-family: Arial;font-size: 18px;font-weight: bold;font-style: normal;text-transform: none;text-decoration: none;" href"https://actitoservices.krxd.net/click_tracker/track?kxconfid=spqyu44mp&kxcampaignid=cliente&clk=${URL1}">CALCULA TU PRECIO</a> </font></h2>

Duplicate attribute

A duplicate attribute in an HTML tag can block the rendering of the HTML.

images/download/attachments/650477702/image2021-10-13_16-16-48.png

In the following example, we notice that the img tag contains the title attribute twice, which causes an error.

Example of incorrect code
<a href="https://actito.com/go/171365e3a997376117" target="_blank"><img align="center"
border="0"
class="center autowidth fullwidth"
src="https://img.actito.com/repo-images/product/345846/01.jpg"
alt="Actito Easy, le vitrage facile à nettoyer" title="Actito Easy, le vitrage facile à nettoyer" style="outline: none;
-ms-interpolation-mode: bicubic; clear:
both;height: 100%; float: none; width: 100%;
max-width: 1100px; display: block;
border-radius: 6px;"title="Image"
width="168" height= "137"/></a>

E-mail compatibility

Some practices are to be avoided in your HTMLs because they are not compatible with some or all e-mail clients that your profiles can use.

Therefore, the following elements are not supported:

Practices to avoid

Some practices are not supported by all email clients and can thus lead to problems. That's the reason why we strongly recommend to avoid using the following elements in the emails you send via Actito.

  • The use of javascript

  • The use of external style sheets

  • The use of forms

  • Png, bmp, tiff and pjpg images

  • The use of Flash

  • The use of sounds

  • The use of Area Map

Items only supported by some email clients

  • Attribute 'td' on the 'Rowspan'

  • Background images ('background-image')

  • The tag 'style' in the header