Understanding The Gobbledygook

The HTML language defines what and how parts of a web page are displayed. This is done by "tagging" the parts of the page with special identifiers known simply as tags. In HTML code, tags always begin and end with the greater than and less than symbols (< >). Tags come in two varieties, pairs and self-contained.

A paired tag is one which consists of two parts, a start tag, or tag definition, and an end tag. All end tags are identified by the presence of the / symbol in the tag. For example, a paragraph tag is a paired tag meaning that it has a beginning tag definition, namely, <p>, and a closing tag counterpart, </p>. The text that you want to behave according to the paragraph tag definition resides between the > of the <p> and the < of the </p> closing tag.

<p>The text you want to be be styled according to paragraph styling.</p>

A self-contained tag means that all the information for that tag is in the tag definition itself. A self-contained tag does not have a closing tag counterpart(</>). The most common self-contained tag you will deal with is the image (<img>) tag. Everything needed by the image tag is found in the tag definition itself. There is no </img> tag pair as this is a self-contained tag.

HTML Tag Primer

All HTML tags are identified in code by the < and > symbols. Whatever lies between < and > is the tag. Tags are made up of three primary parts; the tag name, attributes and values. Looking at a common tag, the anchor or <a> tag we see,

All email templates consist of several key elements. These are paragraphs, spans , tables, images and links. Each of these elements have attributes which can be defined by you to craft the look you want in your email template. Though these are not all of the possible elements that can be found in an HTML document, these are the most common.

Paragraphs <p>

The paragraph tag defines paragraphs. For example,

<p>This is paragraph one.</p>

<p>This is paragraph two.</p>

would display as,

This is paragraph one.

This is paragraph two.

When one paragraph ends and another begins their will usually be a blank line between the two.

Tables <table>

 How an email template is laid out is controlled by the table tag and its related tags, <tr> and <td>. Following is a two column, two row standard table.

This table is made up of the  <table>, <tr> and <td> tags to create this table. Another tag you will see is <tbody> and can for your purposes, be ignored.

The table tag is a paired tag consisting of the <table> and </table>  tag pairs. The table definition tag defines the behavior of the table as a whole and is the first tag used to construct a table. Looking at the code for the table above you will see,

<table style="width: 100%;" border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

Let's break this down to understand it. Knowing how to identify the parts of a table will help you navigate the HTML code to find the part of the page you want to modify.

The first part, <table style="width: 100%;" border="1" cellspacing="2" cellpadding="2">, defines the table. This definition sets the table width, border, cell spacing and cell padding. 

Table Width

The width can be set in either absolute sizes represented as pixels (px) or relational sizes represented as percentages (%). Any table size definition which uses percentages will calculate that percentage from the tag (otherwise known as the container) the table definition is found in. For example. If you are creating a table within a table then the first table definition would be known as the container for the embedded, or second, table definition.

 So, if our parent container is 600 pixels wide and we put a table in that container with a width of 50%, then that table would display at 300 pixels wide.

Table Border

Though our table definition uses the border attribute (border-"1") it is better to use a style definition to define a table border.

Instead of using border="1" use style="border: 1px solid black;", so that your table definition appears as,

 <table style="width: 100%;" style="border: 1px solid black;" cellspacing="2" cellpadding="2">

In this example we see two style definitions. Separate style definitions can be combined into one style definition by separating each style attribute with a semicolon (;). Such that,

 <table style="width: 100%; border: 1px solid black;" cellspacing="2" cellpadding="2">

 Arranging Elements in a Table

Once the table is defined, the individual spaces within a table must be defined. Tables use an additive model of table rows. Table rows are defined using the <tr> tag pair in the confines of the table tag pair. Individual table "spaces," "boxes" or commonly known as, cells are defind using the <td> tag within the confines of the <tr> tag pairs.

The first row of your table is found in the first table row definition/ That row is then filled with a table cell or cells using the <td> tag pair.

The table shown above is a common two column page layout. To increase the number of columns you increase the number of <td> tag pairs found within the <tr> tag pair.

<table>

beginning of the table,

<tr>

the first row which is made up of two columns, or cells

<td>

column, or cell, one of row 1

<td>

column , or cell, two of row 1

</tr>

end of row 1

<tr>

begin row two

<td>

column, or cell, one of row 2

<td>

column, or cell, two of row 2

</tr>

end of row 2

</table>

end of the table.

 To make a three column table, add an extra cell in each table row,

<table>

beginning of the table,

<tr>

the first row which is made up of three columns, or cells

<td> (...</td>)

column, or cell, one of row 1

<td>

column , or cell, two of row 1

<td>

column , or cell, three of row 1

</tr>

end of row 1

<tr>

begin row two

<td>

column, or cell, one of row 2

<td>

column, or cell, two of row 2

<td>

column, or cell, three of row 2

</tr>

end row two

</table>

end of the table.

Would display as,

Understanding the relationship between what you see and the code will help you find parts of the document you want to alter.

For example, let's say you wanted to change something in the bottom-right cell. You know it is in the second row and in the last cell of the second row. So to find this cell in code, you search for the table, find the second <tr> then find the third <td> within that second <tr>.

Looking at the table outline the red highlighted text represents the place where this cell would be found in code.

<table>

beginning of the table,

<tr>

the first row which is made up of three columns, or cells

<td>

column, or cell, one of row 1

<td>

column , or cell, two of row 1

<td>

column , or cell, three of row 1

</tr>

end of row 1

<tr>

begin row two

<td>

column, or cell, one of row 2

<td>

column, or cell, two of row 2

<td>

column, or cell, three of row 2

</tr>

end row two

</table>

end of the table.

Let's say that your purpose for finding this cell was that you wanted to make everything in the cell bold. To do so, you would add the font-weight setting in the style attribute of that <td>,

<table>

beginning of the table,

<tr>

the first row which is made up of three columns, or cells

<td>

column, or cell, one of row 1

<td>

column , or cell, two of row 1

<td>

column , or cell, three of row 1

</tr>

end of row 1

<tr>

begin row two

<td>

column, or cell, one of row 2

<td>

column, or cell, two of row 2

<td style="font-weight: bold;">

column, or cell, three of row 2

</tr>

end row two

</table>

end of the table.

<table style="width: 100%;" border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td style="width: 33%;">Nothing changed here</td>
<td style="width: 33%;">Nothing changed here</td>
<td style="width: 33%;">Nothing changed here</td>
</tr>
<tr>
<td>Nothing changed here</td>
<td>Nothing changed here</td>
<td style="font-weight: bold;">Everything in this cell is bold</td>
</tr>
</tbody>
</table>

would produce,

Nothing changed here	Nothing changed here	Nothing changed here
Nothing changed here	Nothing changed here	Everything in this cell is bold

 Looking at one of BombBomb's pre-loaded templates you can see how table rows break up the vertical layout of a template.

Looking at the page exploded out you can see how table elements are used as containers for the various email template's regions.

Let's look at the code of this template row-by-row,

Images <img>

One of the best "road maps" in HTML code is the image tag (<img>). Usually there are very few of these within an HTML email template. Since there are so few they stand out and are good markers to find sections of HTML code containing the code you want to change.

The image tag must have at least one attribute and that being the href attribute which defines were to get the image.

<img href="http://mywebsite.com/myimage.jpg" />

You will notice the use of the / before the > symbol. This is how self-contained tags are formatted according to the Strict HTML standard. When trying to find the code you want to edit look for the <img... tag of the nearest image to your target to help locate the code you want to change.

 

 

Looking at the email template, let say for example that you want to edit the code that makes up the yourwebsite.com link. You know that an image follows closely after it and that it is the last image in the template.You are looking for the <a... anchor tag so find the last <img... tag and look up just before that and you will see the code for the hyperlink. You also know that they are on different rows and you can see two rows (<tr>) here.

 

Links <a>

Hyperlinks are how most things are connected together on the web. Just about all click-able text and images use the <a> tag to define the destination when clicked. The most common editing you will do to a link is to add color. Email clients and services such as Hotmail and GMail render links differently. GMail does its own link highlighting by adding a blue line or border to a linked object and there is nothing that can be done about that.

The best way to insure that the color you want displays in the recipient's email is to use a double coloring method which will make the link appear in the color you want in virtually all email clients. is to assign a color to the anchor tag and to span the text to be colored with the color properties you want.

<a style="color: #fff;" href="#"><span style="color: #ffffff;" color="#FFFFFF">yourwebsite.com</span></a>

You can see that the anchor tag has a style attribute which sets the color property of the link to white (fff is shorthand for ffffff). Adding the <span> tag helps alleviate the overtly blue highlighting done by GMail to links. This one-two combination forces the link to display as white and forces the text itself to display as white.

Spans <span>

As seen above spans are for applying information to a spanned part of the page. Spans are useful for applying treatments such as fonts, colors, borders, etc. A span is a tag pair. Span has the beginning tag definition <span> and the closing tag </span>.

The <span style=".......">stuff spanned</span> tag pair is how you get granular control over every item on your web page.

Solutions for Common HTML Editing Requests

How Do I Put Space Around Text or Images?

Using the Padding Style Settings

Padding and Margin are two style settings which behave nearly identical except how the "space:" is applied.

Margin adds space to the outside of an item.

Padding adds space to the inside of an item.

In most cases you will want to add space to the inside of a table cell so that the contents are not flush against the inside of the cell.

This cell does not have padding added

This cell has 10px of padding added.

<table style="border: 1px solid black;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="border: 1px solid black;">This cell does not have padding added</td>
<td style="padding: 10px 10px 10px 10px; border: 1px solid black;">This cell has padding added.</td>
</tr>
</tbody>
</table>

To add space around the contents of a table cell, use the STYLE attribute with the padding setting.

<td style="padding: 10px;">

In the above example I used only one "10px" to define the size of the padding. If I want the top, right, bottom and left inside areas to be padded the same use just one size definition. If you want the top, right,bottom and left sides to have different paddings then you would need to set each side as needed. The order of "sides" in the padding setting reads from left to right as top, right, bottom and left or in a clockwise manner around the object.

PADDING: 10PX (top) 5PX (right) 0PX (bottom) 2PX (left);

Padding can also be used to add space around an image,

<img style=padding: 5px;" href="http://wwww.mywebsite.com/mypicture.jpg">

The order that attributes appear in a tag does not matter. HREF could appear before STYLE.

How Do I Make Text Wrap Around My Picture?

There are two ways to accomplish this.

First you could create a two column, one row table in which you put the picture to one side and the text in the adjacent cell.

The image tag (<IMG>) has an attribute named "align" which will cause elements following it to align according to the value supplied. If align is set to left then the image will go to the left and text will wrap to the left around the image.

<p><img src="http"//www.mywebsite.com/myimage.png" align="left" />This is my text that I want to wrap around the image. It is some awesome text having some very text-ly features which stand out among other texts.</p>

Would display as,

This is my text that I want to wrap around the image. It is some awesome text having some very text-ly features which stand out among other texts.

 

You can improve the appearance by adding some space around the image using the hspace attribute or padding style. Such that,

<p><img src="http"//www.mywebsite.com/myimage.png" align="left" style="padding:0px 10px 0px 0px;" />This is my text that I want to wrap around the image. It is some awesome text having some very text-ly features which stand out among other texts.</p>

Would display as,

This is my text that I want to wrap around the image. It is some awesome text having some very text-ly features which stand out among other texts.

 

Style Snippets

Copy these style snippets and add them to the style (style="styles in here...") attribute of the tag you want to change.

Make text bold	font-weight:bold;
Change the font	font-family:arial, helvetica,sans-serif font-family:georgia,times,serif font-family:courier,monospace See also, I'm Having Trouble With My Fonts.
Change color of something (text, borders, etc.)	color:ffffff;
Add space around something	padding: 5px 5px 5px 5px;, or padding:5px; - if all sides are the same then you set it once and it will be applied to all sides. (padding: [top]px [right]px [bottom]px [left]px;)
Change background color	background-color:ffffff;

 

If you want to see instructions for other tasks added to this guide, please add a comment below. Thanks!