Simple Email Marketing
Home > Resource Center > Account how-to > Basic format for email HTML

Basic format for email HTML

So you want to write your own code? Great idea! There are a few conventions you should know about.

Your code is inserted into a larger document

Templates are themselves an HTML document, complete with a heading and body framework. When using the "Code your own" template or the editor's HTML block, all you'll need is the table code for your custom elements.

Said another way, you will not need to use <HTML>, <BODY>, <HEAD>, <TITLE> or <META> tags in your code, as they're already included in the template and your code will be inserted after these tags in the document:

 

<html>

    <head>

        <title>Example document</title>

    </head>

    <body>

        <table>

            <tr>

                <td>

                    <!-- Your code is inserted here -->

                </td>

            </tr>

        </table>

    </body>

</html>

 

If you're pasting in code from a program like Dreamweaver or FrontPage, give it a little extra attention, making sure to remove any of the extra tags wrapped around your element.

Use simple table structures

Here's the table structure for a three-row table. We'll keep building on this as an example:

 

<table>

        <tr>

               <td>Header</td>

        </tr>

        <tr>

               <td>Content</td>

        </tr>

        <tr>

               <td>Footer</td>

        </tr>

</table>

 

Screen Shot 2015-01-27 at 2.17.59 PM.png

 

It's in the TDs that you'll want to add your logos and copy, so let's go ahead and do that in the code:

 

<table>

        <tr>

               <td align="center"><img src="logo.jpg"></td>

        </tr>

        <tr>

               <td>Content</td>

        </tr>

        <tr>

               <td align="center">123 Main St. Nashville, TN 37212</td>

        </tr>

</table>

 

-1 2.17.49 PM.png

Nesting tables

Often, you'll want to use multiple columns as well. That's simple enough to do with a nested table. Nested tables are the Russian Nesting Dolls of email design and really are as simple as placing a complete table inside a <TD> of another table. For our content, let's try something like this:

 

Screen Shot 2015-01-27 at 2.20.16 PM.png

 

This is easily achieved by nesting a two-column table into the cell (TD) of our previous examples that we've designated for content.

 

<table>

        <tr>

               <td align="center"><img src="logo.jpg"></td>

        </tr>

        <tr>

               <td>

                   <table>

                       <tr>

                              <td><img src="left_image.jpg"></td>

                              <td>Sweet, sweet copy</td>

                       </tr>

                   </table>

               </td>

        </tr>

        <tr>

               <td align="center">123 Main St. Nashville, TN 37212</td>

        </tr>

</table>

 

Et voila, we've laid out a design to place into a template.

 

Other good things to know

  • Stay away from COLSPAN and ROWSPAN. Some email clients don't know how to render COLSPAN and will blow your beautiful design up into pieces. A handful of HTML design programs build tables with COLSPAN by default. You can usually manage your application preferences to turn this off, and we recommend doing so. Trust us on this one -- COLSPANs are not a good time. Nesting is the way to go.
  • The HTML used in these examples is woefully under-styled. You'll want to include the attributes that define style, width, background color and all that good stuff in the TDs. Here's an example of the format we generally opt for:

    <td align="left" bgcolor="#ffffff" style="Font-family: Arial, sans-serif;">COPY</td>
     
  • Link tracking relies on the integrity of your table's structure. If you see your tables breaking and going awry when you test, you probably need to have a good look at your table code. HTML Tidy is an easy, free program that can help you validate your HTML, as can any code-editing software that color codes the different elements of your markup.
You must to post a comment.
Last modified
09:30, 25 Apr 2017

Tags

Classifications

This page has no classifications.