HTML Email Message Primer for Bulk Email Message Program

Basic HTML Email Message Primer

Like any tool, using an HTML editor to generate HTML email messages must be done carefully and correctly. It helps to know a little bit about what goes on in the code behind the scenes to successfully use most HTML editors.

Here are some issues that commonly arise when using a visual or WYSIWYG (What You See Is What You Get) editor. Using simple examples of HTML code and how it behaves when various editing methods are used, our primary focus will be the use of HTML in email messages, which can be quite different than using HTML on a web page.

What Is HTML?
HTML stands for Hypertext Markup Language, and is how basic web pages are built. Programmers may cringe at this next statement, but HTML could be thought of as a programming language, with its own syntax and rules that need to be followed exactly in order to work properly.

When looking at HTML code, there are two basic sections common in most web pages: the <head></head> section and the <body></body> section. The code in the body section determines how the page is rendered and displayed. The code in the head section contains items that are not typically seen, or are used globally throughout the message, controlling the overall appearance. This tutorial deals with what is in the body of the HTML email message.

Examples of HTML code
Most HTML code consists of tags that surround what is actually displayed, controlling how that text or item is rendered to the viewer.

For example, to make the word "Text" red, use the following HTML code:

<FONT color="red">Text</FONT>	Text
<FONT color="#ff0000">Text</FONT>	Text

The first part of the tag indicates which attribute of "Text" changes, in this case the font color. The red color is applied until the next closing font tag. Using the hexadecimal code for the color allows you to make subtler changes to the color like maroon, or scarlet if necessary. The closing font tag stops all font attributes that are listed in the corresponding opening font tag. The closing tag is needed to prevent the color red, or any other specified attribute from bleeding to the rest of the text in the document.

Other font attributes can be included in the same tag. The tags can also be separate and nested:

<FONT color="#FF0000" size="3" face="Times New Roman">Text</FONT> and more text	Text and more text
<FONT color="#FF0000"> <FONT size="3"> <FONT face="Times New Roman">Text</FONT></FONT></FONT> and more text	Text and more text

With nested tags, there is a separate closing font tag for each opening font tag. Text that falls outside the tag is governed by whatever the default is for the HTML editor in use.

HTML tags can be placed around other tags to control different effects. To apply an underline use the tags.

Text and more text

Text and more text

Note how the attributes are applied. The underlining applies to the whole phrase, but the font size, color and face only apply to "Text." Tags surrounded by other tags are called nested tags, and this is where most people run into problems with using a WYSIWYG-type HTML editor. A virtual endless number of tags can be nested one inside another, but they must make sense. In the example above, the tags should surround the text properly.

Text and more text

Text and more text

Note how the opening tag is inside the tag, but the closing tag is outside the closing tag. The results may still be the same when viewing the text, but it violates the syntax rules governing HTML and could lead to problems when attempting to modify anything else with the code. Some high-end editing programs like Dreamweaver can point out when tags are improperly nested, as in this example, and can even fix many of them automatically.

Visual editing
WYSIWYG is a ridiculously long acronym: What You See Is What You Get. It means that you can manipulate font attributes, table attributes or image attributes using a toolbar or keyboard commands, rather than manipulating the HTML code directly, with the same intended results. A more elegant term that's often used, which I will apply in the rest of the article, is visual editor.

So instead of editing the code directly, as in the first examples, simply highlight "Text" in the visual editor interface and select the color from a palette using the font tool in the toolbar. The HTML code still changes, but it is in the background. Basically, the way it appears in the editor screen should be how it looks when the email message is sent.

When editing with a visual editor, care must be used when attempting to change a section of the text. If something isn't highlighted correctly, or the selected text is spread across different table fields, the changes might not work as expected. Note the variegated font styles and colors in this block of text.

CLASS SCHEDULE

 

Word Processing Software
 Basic to Advanced Techniques
 

10:00am to 12:00pm

CLASS SCHEDULE
Word Processing Software
Basic to Advanced Techniques
10:00am to 12:00pm

If all the text were highlighted and changed to a different color using the editor screen, unexpected results might follow.

CLASS SCHEDULE







Word Processing Software
 Basic to Advanced Techniques
 10:00am to 12:00pm

CLASS SCHEDULE Word Processing Software
Basic to Advanced Techniques
10:00am to 12:00pm

The intention was to change all the font color to blue, but it also changed the size to 1 for the entire selection, which was not intended. Note in the code, there are two font sizes attempting to govern "Word Processing Software." The first tag, which specifies size 2, is overridden by the second tag, indicating size 1. When highlighting sections of text in this manner, care must be used to prevent problems like this.

For variegated text styles like these last examples, it is best to edit one section at a time. This will prevent nesting and actually change the font tags as expected.

Here is how the code looks when the text is edited one line at a time, changing the font color to blue.

CLASS SCHEDULE

 



Word Processing Software
 


Basic to Advanced Techniques

 

10:00am to 12:00pm

CLASS SCHEDULE
Word Processing Software
Basic to Advanced Techniques
10:00am to 12:00pm

Remember, editing the email message in smaller chunks will help prevent HTML code build up that will eventually be un-fixable.

Summary
Like all good things, time is needed to ensure that the HTML email message looks good. Using standard HTML code with proper syntax is one of the best ways to ensure consistency of your email message across multiple email clients. When using a visual editor to make changes to HTML code, be aware of some of the things that are really going on behind the scenes that could negatively impact the rendered email message.