Saltar al contenido principal

Respetar las reglas de HTML

Para garantizar el correcto funcionamiento de su correo electrónico, se deben tener en cuenta algunas buenas prácticas y recomendaciones.

Editor Actito​

Algunas buenas prácticas son estrictamente aplicadas por el editor HTML Actito.

Por lo tanto, no será posible importar un archivo HTML o codificarlo directamente si no se cumplen las siguientes restricciones.

Estas restricciones también se aplican al crear una plantilla personalizada por nuestros equipos.

Restricciones comerciales​

No se permiten enlaces relativos​

Los enlaces definidos por el atributo href de una etiqueta HTML <a> no pueden ser insertados como enlaces relativos.

Todos los enlaces deben ser URL absolutas, comenzando con http(s)://, o una personalización sintácticamente correcta (${variable}).

Es posible combinar una personalización con una ruta relativa, por ejemplo: "${variable}/fe/actito-documentation-client/campaign/en/ACTITO_Documentation.html" (consulte Configuración de enlaces en sus correos electrónicos para obtener más información), pero no se permiten enlaces puramente relativos ni URLs sin http(s):// (por ejemplo: "www.actito.com").

images/download/attachments/650477689/image2021-5-5_16-20-44.png

Ejemplo de código incorrecto

<a href="www.actito.com">Enlace incorrecto</a>

Máximo de 255 caracteres en el título de los enlaces​

El atributo title HTML de un enlace (etiqueta <a>) puede contener un máximo de 255 caracteres.

La función del atributo title es proporcionar información adicional al título del enlace. No se trata de una descripción exhaustiva. Por lo tanto, debe ser conciso, de lo contrario, impedirá la importación de un archivo HTML.

images/download/attachments/650477689/image2021-5-5_16-20-10.png

Ejemplo de código incorrecto

<a
  title="Seda suave, bordado con flores misteriosas: descubre nuestra nueva colección de lencería inspirada en los deleites del Jardín del Edén. Ponte este negligé estampado lujosamente y deja que las delicadas redes realcen tus curvas. Para nosotros, todo se trata de orden y belleza, lujo, tranquilidad y lujuria."
  href="https://www.actito.be/nl_BE/bh-s-hot-now-essentials-1"
  target="_blank"
></a>

Archivo adjunto faltante​

Como se explica en la ventana de importación de HTML, las imágenes utilizadas en los correos electrónicos pueden ser referenciadas de dos maneras:

  • Ya sea a través de enlaces absolutos (imágenes alojadas en un servidor externo) y, en este caso, basta con cargar solo un archivo HTML

  • O incluyendo una carpeta que contenga las imágenes en un archivo comprimido que también contenga el archivo HTML (uno por cada idioma)

En el segundo caso, las imágenes pueden ser referenciadas de manera relativa (por ejemplo, src="nombre_Carpeta/nombre_Imagen.jpg").

Consejo

Las imágenes deben ser referenciadas directamente para ser alojadas en el correo electrónico. No pueden estar codificadas en base64.

Si el HTML hace referencia a una imagen que no está en la carpeta de imágenes (o en otra carpeta, o con un nombre de imagen/carpeta incorrecto), se producirá un error de tipo "archivo adjunto faltante" con la referencia de la imagen que falta.

images/download/attachments/650477689/image2021-8-18_16-32-55.png

Ejemplo de código incorrecto

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

Restricciones de CSS​

No se permiten enlaces relativos​

Las hojas de estilo externas referenciadas en las etiquetas HTML <link> no pueden definirse como enlaces relativos.

Todos los enlaces deben ser URL absolutas; de lo contrario, se considerará que el recurso está ausente.

images/download/attachments/650477689/image2021-5-5_16-21-11.png

Ejemplo de código incorrecto

<link rel="stylesheet" href="/build/actito-style.aaae10e3.css" />
Consejo

Las imágenes utilizadas en el correo electrónico pueden referenciarse como enlaces relativos y almacenarse en una carpeta del archivo comprimido que contiene el HTML (ver regla anterior).

Sin embargo, esto se aplica específicamente a las imágenes en las reglas CSS, donde solo se permiten enlaces absolutos.

Error de formato en una regla CSS​

Las reglas CSS presentes en las etiquetas <style> deben formatearse correctamente. Una regla CSS consta de un selector y una declaración. El selector apunta a un elemento HTML, y la declaración contiene el nombre de la propiedad y su valor asociado (por ejemplo: propiedad: valor;).

Si una regla CSS no es válida, el validador de Actito señalará el token erróneo y presentará las posibilidades de notación válidas.

Información

El número de línea en error señalado se refiere a la etiqueta <style> en la que se encuentra la regla incorrecta, no a todo el HTML.

Si hay varias etiquetas <style> en el <head> del HTML, las líneas se cuentan por separado para cada una de ellas.

En el siguiente ejemplo, el td en la línea 21 (de esta etiqueta <style> específica) .root.one-cols>tbody>tr>td>{width:660px} no debe cerrarse y provoca un error.

La sintaxis correcta es .root.one-cols>tbody>tr>td{width:660px} .

images/download/attachments/650477689/image2021-5-5_18-50-51.png

Ejemplo de código incorrecto

<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>

Restricciones de análisis​

Error de tipo "carácter inesperado"​

Un carácter inesperado en medio de las etiquetas HTML puede bloquear la representación del correo electrónico.

Un carácter inesperado puede interpretarse de varias maneras, como:

  • Un carácter adicional en el código. Por ejemplo, dos comillas dobles consecutivas pueden desplazar el análisis del correo electrónico.

  • Por el contrario, la falta de comillas también desplazará el análisis del correo electrónico.

  • O la falta de un carácter en el código. Si en el fragmento href="https://www.actito.com", falta el signo "=", la comilla justo después del href se considerará inesperada.

images/download/attachments/650477689/image2021-8-18_15-44-51.png

Este ejemplo indica un error debido a un carácter incorrecto en la línea 243. La columna indica la posición del carácter en cuestión en la línea.

Se observa que falta el signo "=" después del href, lo que hace que la notación del enlace no sea válida.

Ejemplo de código incorrecto

<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>

Atributo duplicado​

Un atributo duplicado en una etiqueta HTML puede bloquear la representación del correo electrónico.

images/download/attachments/650477689/image2021-8-18_16-0-42.png

En el siguiente ejemplo, se observa que la etiqueta img tiene el atributo title duplicado, lo que provoca un error.

Ejemplo de código incorrecto

<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>

Restricciones de seguridad​

El uso de JavaScript en un correo electrónico está altamente desaconsejado y se considera una mala práctica.

De hecho, los scripts se consideran una vulnerabilidad de seguridad en un correo electrónico, ya que los perfiles no pueden saber qué tipo de script se activa cuando abren un correo electrónico. Esto es muy diferente en comparación con el uso de JavaScript en un sitio web, donde los perfiles pueden elegir en qué sitios web navegan y evitar los más riesgosos. Por el contrario, con los correos electrónicos, el remitente tiene más control sobre su contenido, y abrir un correo electrónico se percibe como una acción sin riesgo para los perfiles. Aunque, por supuesto, sabemos que no tienes malas intenciones hacia tus perfiles, los servicios de correo web no son tan confiados y quieren proteger a sus usuarios.

En consecuencia, el uso de JavaScript en un correo electrónico representa un riesgo importante para la entregabilidad. En el mejor de los casos, el script será bloqueado por la política de seguridad de los servicios de correo web.

Pero lo más probable es que el correo electrónico sea clasificado como spam, o que el dominio de envío/la dirección IP sea señalada por intento de hacking.

Por estas razones, no se permite JavaScript en los correos electrónicos de Actito.

Etiquetas de script​

Las etiquetas utilizadas para agregar un script como tal no están permitidas (tanto en el CSS como en el cuerpo): script, embed, iframe, object

images/download/attachments/650477689/image2022-8-4_14-48-18.png

Ejemplo de código incorrecto

<script type="text/javascript">
  (function(e, t, o, n, p, r, i) {
    e.visitorGlobalObjectAlias = n;
    e[e.visitorGlobalObjectAlias] =
      e[e.visitorGlobalObjectAlias] ||
      function() {
        (e[e.visitorGlobalObjectAlias].q =
          e[e.visitorGlobalObjectAlias].q || []).push(arguments);
      };
    e[e.visitorGlobalObjectAlias].l = new Date().getTime();
    r = t.createElement("script");
    r.src = o;
    r.async = true;
    i = t.getElementsByTagName("script")[0];
    i.parentNode.insertBefore(r, i);
  })(
    window,
    document,
    "https://diffuser-cdn.app-us1.com/diffuser/diffuser.js",
    "vgo"
  );
  vgo("setAccount", "90387794");
  vgo("setTrackByDefault", true);
  vgo("process");
</script>

Atributos de eventos​

Los atributos de eventos (event attributes) son atributos agregados a otra etiqueta (como elementos de medios o formularios) que tienen la capacidad de activar un script cuando el usuario realiza una acción en el correo electrónico.

Los siguientes atributos de eventos no están permitidos:

onafterprint, onbeforeprint, onbeforeunload, onhashchange, onload, onmessage, onoffline, ononline, onpagehide, onpageshow, onpopstate, onresize, onstorage, onunload, onblur, onchange, oncontextmenu, onfocus, oninput, oninvalid, onreset, onsearch, onselect, onsubmit, onkeydown, onkeypress, onkeyup, onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onwheel, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onscroll, oncopy, oncut, onpaste, onabort, oncanplay, oncanplaythrough, oncuechange, ondurationchange, onemptied, onended, onerror, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, onsuspend, ontimeupdate, onvolumechange, onwaiting, ontoggle

images/download/attachments/650477689/image2022-8-4_14-45-24.png

Ejemplo de código incorrecto

<a
  href="https://www.actito.be/actito-portal/images/logo"
  onerror="this.onerror=null;this.src='Images/logo/carousel_no_image.png';"
  target="_blank"
  data-actito-link-id="link_8"
>
  <img
    src="https://www.actito.be/actito-portal/images/logo.png"
    width="560"
    height="315"
    mc:edit="560_imges"
    class="full_img"
    alt="img_560X315"
    style="display:block; max-width:560px;"
    border="0"
  />
</a>

Expresiones agregadas a una etiqueta​

Los scripts también pueden agregarse a los atributos de ciertas etiquetas.

No se permite el uso de una etiqueta que tenga un atributo con un valor que contenga alguno de los siguientes elementos: javascript:, eval( , expression(

images/download/attachments/650477689/image2022-8-4_14-54-17.png

Ejemplo de código incorrecto

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script type="text/javascript">
    window.onload = function() {
      // ww w . j ava2s . c om
      var x = document.getElementById("myP").textContent;
      eval("var e = " + x + ";");
      document.body.innerHTML = e();
    };
  </script>
</head>

Imágenes SVG​

Algunas prácticas deben evitarse en tus HTMLs ya que no son compatibles con algunos o todos los clientes de correo electrónico utilizados por tus perfiles. Por lo tanto, los siguientes elementos no son compatibles.

No es posible utilizar imágenes SVG en los correos electrónicos.

images/download/attachments/650477689/image2022-10-21_16-2-24.png

Ejemplo de código incorrecto

<img
  src="happy.svg"
  alt="logo"
  width="165"
  style="font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:13px;display:block;border:none"
  class="t_w100p m_w100p"
/>

Compatibilidad del email​

Algunas prácticas deben evitarse en tus HTMLs ya que no son compatibles con algunos o todos los clientes de correo electrónico utilizados por tus perfiles. Por lo tanto, los siguientes elementos no son compatibles.

Lista de elementos no compatibles con todos los clientes de correo​

  • El uso de hojas de estilo externas

  • El uso de formularios

  • Imágenes en formato bmp, tiff, pjpg

  • El uso de Flash

  • El uso de sonidos

  • El uso de Map Area

Lista de elementos compatibles con algunos clientes de correo​

  • El atributo 'Rowspan' en los 'td'

  • Imágenes de fondo ('background-image')

  • La etiqueta 'style' en el head