Troubleshoot HTML in your email

If you find that your HTML Is not rendering correctly, it may be due to some of the issues below, as manual coding invites room for errors or difficulties. Use this guide to troubleshoot your HTML.

Note: For more information about using HTML in your emails, see Design your email with HTML

Images don't appear in the test email

Keep in mind that some email providers hide images by default, or subscribers turn these off on their own. Because of this, it’s important to ensure that all important information is conveyed in text, outside of images. Additionally, always use alt text for your images.

The test email doesn’t reflect the code

To find what caused the discrepancy, check to see if this issue occurs across multiple email providers, as each provider has varied levels of support for custom HTML and CSS:

  • If the issue only occurs with one email provider: it’s likely an issue with how the provider interprets the HTML.
  • If the issue occurs across all email providers: it’s likely an issue with the HTML itself.

However, keep in mind that email rendering is a deeply complex process, and it’s unlikely your email will render identically everywhere. 

Common HTML syntax issues

If you’re not sure what isn’t working with your code, make sure you check for these common syntax issues:

  • Ensure all opening tags have closing tags: Also, make sure that the tags are nested in the correct order. Proper indentation and line breaks make this easier to confirm.
  • Remove nested single or double quotes: If your style tag values are wrapped in quotes, and there are quotes within them (for instance, around a font name), this can cause the HTML to think the style tags have ended. Additionally, If any font names have single quotes around them, remove them.
  • Check for typos and missing semicolons: Sometimes, a simple typo can prevent HTML from rendering. Make sure to spell-check the code, and ensure that each relevant field has a semicolon.
  • Double check that media queries are properly formatted, for example: @media only screen and (max-width: 400px)

Dark mode code

If you’re trying to add code that supports dark mode, know that some email providers fully invert colors for dark mode while others partially invert colors or don't invert them at all. For more information, see Optimize email for dark mode.

 

Learn more about Attentive Email

If you're interested in learning more about Attentive Email, please submit your information here.

Articles in this section

Was this article helpful?
0 out of 0 found this helpful