Article first published April 2008, updated January 2020
Have you ever seen an HTML page or email where everything looks fine, except instead of apostrophes there are odd question marks or square blocks? You might also see other characters replaced similarly.
Info from our 2008 article
Most commonly, this occurs when importing HTML that has been created by Microsoft Word. For generating HTML, Word uses a specific character set called “Windows Latin 1” that has special characters like ‘smart quotes’ and trademark symbols.
When you view the email on your own machine, those characters will show up, but then when imported into Campaign Monitor they might disappear or be converted into incorrect characters.
Character encoding makes the difference
The reason is that Campaign Monitor sends in UTF-8 encoding (which covers a wide number of languages), and the special characters are not in the same location in UTF-8 as they are in Windows Latin 1.
So what to do about it? Well, the first (and most thorough) option is to just not use MS Word to generate HTML. Word tends not only to cause character problems but also adds vast amounts of unnecessary HTML to even simple pages.
If you view the source you will see rampaging hordes of span tags and CSS with oddly named classes everywhere. It can also tend to break tags that Campaign Monitor uses like <unsubscribe></unsubscribe> by inserting other tags inside them.
There are much better options for simple HTML creation out there, even at little or no cost—look at tools like NVU, Coffee Cup (free and paid), and First Page.
Of course, you can go right up to tools like Dreamweaver if you have the need.
Another alternative is to do some ‘find and replace’ work in notepad or similar to remove Word’s smart characters and replace them with the correct Unicode characters. Some common ones to look out for are:
- For “ Left double quotes: Use “
- For ” Left double quotes: Use ”
- For ’ Apostrophe: Use ’
That way you can have the typographically correct characters show up in your email. Character encoding can be a tricky area, and you have to keep an eye on it in your HTML, in your subscribe form pages, and in the subscriber lists your import.
Always keep in mind that Campaign Monitor will send in UTF-8 no matter what, so you want to import everything in UTF-8 to begin with, so no conversion occurs.
For more information on HTML and character encoding, read The Definitive Guide to Web Character Encoding at SitePoint.
4 Commonly asked questions about HTML email
For those who aren’t familiar with HyperText Markup Language (HTML), it can be an overwhelming topic. That’s why we’ve gone ahead and compiled a list of commonly asked questions regarding HTML email.
1. What is HTML email?
An HTML email is an email that was designed using HyperText Markup Language. These emails stand out from plaintext emails because you have the ability to use and customize all manners of images, fonts, and layouts. Most email marketers prefer HTML emails to plaintext emails because they are more visually appealing and more likely to keep the email reader engaged in the content that is presented.
Source: Gmail/Victoria’s Secret
2. What are HTML elements/tags/attributes?
HTML emails are made up of several different pieces, including elements, tags, and attributes. Each one of these pieces has it’s own function.
Source: Campaign Monitor
HTML Elements: These are the individual “pieces” of a webpage or HTML email. These include your paragraph elements, an image element, and even a link. HTML emails are created with several varying elements to make it more visually appealing for the reader, increasing the chances that they’ll engage with it in some way.
HTML Tags: Your HTML tags are the names of the specific elements that are included throughout your HTML email. They usually come in pairs—a start tag and an end tag. Common tags include:
- <p> </p> – indicates the “pharagraph” element
- <title> </title> – indicates a “title” element
- <h1> </h1> – indicates a “large heading”
- <head> </head> – indicates the element that contains meta information about the specific document
- <body> </body> – indicates visible page content
- <input> </input> – indicates a feils where the users can enter specific data
HTML Attributions: HTML attributes help to further define your individual HTML tags. These attributes help to change the way in which your specific tag is displayed and/or behaves. For example, you can take the HTML <input> tag and further define it with the attribute “type.” This attribute then allows you to define what the specific tag is, such as text or a checkbox.
Source: GoSkills
3. What is the difference between HTML and HTML5?
The only significant difference between HTML and HTML5 is that the later is the most up to date version of the available HyperText Markup Language. The HTML code has gone through several evolutions since it was initially introduced in 1990, and the most current version is HTML5.
4. Which browsers support HTML/HTML5?
All updated internet browsers currently support HTML5, with the only exception being older or outdated browsers.
Wrap up
Coding your HTML emails doesn’t have to be difficult, especially with so many options on the market for drag and drop email editors. If you’re ready to get your feet wet in email coding, Campaign Monitor provides several free tools to help marketers get started, including:
Each of these tools helps to take the confusion out of HTML emails and allows you to get started with creating emails worth sending.
If you want to create stunning HTML emails but lack the coding knowledge behind the practice, Campaign Monitor has your back. Start creating beautiful HTML emails with our drag and drop email editor today.