HTML email code requirements

In order for your HTML to render as expected in Oracle Eloqua and across browsers and email clients, use the guidelines below when working with HTML in an email.

HTML recommendations

  • Always declare the DOCTYPE to ensure the best possible rendering of emails across browsers. The DOCTYPE for HTML is <!DOCTYPE html>. For example, this declares the document to be XHTML 1.0 Strict.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • Write HTML code that is standards compliant. For example, be sure to nest and close elements correctly, use the correct document structure (using the <html>, <head>, <body> tags), and use lowercase element names, attributes, and values. There are various tools and browser plug-ins that can help you validate your HTML code. For example, the W3C provides the free W3C Markup Validation Service.
  • Use of tables is encouraged for more complicated layouts. Using the <div> tag for complex layouts will not work on many email clients. When creating tables, be sure to use the correct HTML code structure using the tags <table>, <tr>, and <td>. Also be aware that nesting tables with fixed widths might cause your email to display unexpectedly across different screen sizes. Be sure to test your email across browsers and screen sizes.
  • Recognize that many email clients block images by default. Because of this, include the alt attribute in your image tag. This will be displayed instead of the image if the email client blocks the image.
    <img height="390" width="580" src="your-image.jpg" alt="This is the text that will display" />
  • Use absolute paths to reference images, stylesheets, and so on. Do not use relative references. For files in the component library, you can get the absolute path after you upload the files.
  • You can include animated GIFs and videos in your emails. Here is how Litmus describes how to code video background in email.
  • Be aware of reserved characters like <, >, and &. These characters make up the HTML language. If you want them to appear in the content of your email, you must use the entity name or number instead. For example &lt;, &gt;, and &amp;.
  • You cannot edit dynamic content, shared content, and signature layouts in the HTML source code editor. You must use design panel of the email editor to edit these types of content. For more information on these types of content, see Component Library.
  • Do not use <html>, <head>, or <body> tags within a text or shared content section. This can create HTML code in the final email that is not standards compliant.
  • Avoid using JavaScript. Most email clients do not support it for security reasons and Oracle Eloqua might give you an error if you try to use <script> tags.
  • Avoid the use of elements like <iframe> or <form> in your emails. These are not supported by most email clients and are often blocked for security reasons. Oracle Eloqua might give you errors if you try to use these tags in your HTML code.

CSS recommendations

  • Support for CSS properties varies across email clients. Use a CSS compatibility chart to validate what is supported.
  • Do not target the <body> tag with CSS.
  • Oracle Eloqua uses CSS to style the code in the Source Editor. Because of this, if you use CSS class names that are also used by the editor, your email might not display as expected. To help avoid this CSS conflict, avoid using the following class names in your HTML code:
    • .body
    • .elq-form
    • .elq-form-ce
    • .elq-responsive
    • .hidden-border
    • .inline-styled-view
    • .main
    • .overlays-active
    • .sc-container-view
    • .sc-view
    • .sc-view.static-layout
    • .sc-view-overflow
  • Positioning like top, bottom, relative, absolute may not display as expected across email clients. Use tables as a more reliable way to position elements of your email.
  • For proper rendering across different browsers, ensure compatibility with the following basic Oracle Eloqua CSS reset included in the application:
    html {
  color:#000;
  background:#FFF;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,button,textarea,p,blockquote,th,td {
  margin:0;padding:0;
}
table {
  border-collapse:collapse;
  borderspacing:0;
}
fieldset,img {
  border:0;
}
address,caption,cite,code,dfn,em,strong,th,var,optgroup {
  font-style:inherit;
  font-weight:inherit;
}
del,ins {
  text-decoration:none;
}
caption,th {
  text-align:left;
}
input,button,textarea,select,optgroup,option {
  font-family:inherit;
  font-size:inherit;
  font-style:inherit;
  font-weight:inherit;
}
input,button,textarea,select {
  font-size:100%;
}

Learn more

Uploading HTML emails or templates

Creating emails using the Source Editor

Editing HTML emails using the Source Editor