HTML Email Template

Introduction

In a digital age characterized by lightning-fast communication, email remains a steadfast pillar of connection. Whether you're sending a newsletter, a promotional offer, or a personalized message, the way you present your content matters more than ever. Enter HTML email templates, the unsung heroes of modern email marketing and communication.

In this age of overflowing inboxes, capturing your recipient's attention and delivering your message can be a daunting challenge. But fear not; HTML email templates are here to simplify this task. These customizable templates empower you to create visually appealing, responsive, and engaging emails that can leave a lasting impression on your audience.

In this article, we are going to see how to build an HTML email template with the help of HTML and CSS. To achieve this, we have to follow some steps. These are as follows.

Begin Your HTML Email Document

First of all, we have to create our HTML file to write the HTML code. Then we have to set the language as English by writing <html lang= "en">. Then, we also have to write the XML file and Microsoft Office namespace inside the XML bits. The code will look like below.

Example 1:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>

  <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width,initial-scale=1">

 <meta name="x-apple-disable-message-reformatting">

 <title></title>

 <!--[if mso]>

<noscript>

<xml>

<o:OfficeDocumentSettings>

<o:PixelsPerInch>96</o:PixelsPerInch>

</o:OfficeDocumentSettings>

</xml>

</noscript>

<![endif]-->

 <style>

  table, td, div, h1, p {font-family: Arial, sans-serif;}

  table, td {border:2px solid #000000 !important;}

 </style>

</head>

</html>

In the above code, first, we created the meta tag, which ensures the right text encoding and viewport scaling across different mobile devices, and one to stop Apple from strangely adjusting the size in their mail apps. Inside the title tag, we write some information in between .

Inside that code, we have to write the code for Microsoft Outlook on Windows and apply it (mso = "Microsoft Outlook"). We also write some XML code that ensures that PNG images display at the right size in Outlook on Windows. Inside the XML setting, we write some HTML code that should be interpreted properly.

Inside the style tag, we write some CSS properties. First, we have set some rules for all our main elements, which create the benefit for the GMAIL webmail.

At last, we have included some table, td {border:2px solid #000000 ! Important;} which creates the border for everything.

Create the Body and Main Table

After creating the structure, we have to insert the body part in our code. We have to write all the below code after the completion of the </head> tag.

Example 2:

<body style="margin:0;padding:0;">
 
    
 
      <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;"> 
               <tr>
                        <td align="center" style="padding:0;">
                                Hello!
                        </td>
                </tr>
         </table>
 </body>

We also provide the margin inside the body tag, and the padding on the body tag is set to zero to ensure that all unwanted spaces should be removed. Also, we have added the table, which has the width as 100%. It will act as the body tag for our email. After that, we have to apply some body tags inside the table tag. After doing all those things, we have to set the role of "presentation" for the table. This will make the table more accessible for the screen reader.

Then, we have to set the border-collapse to collapse and both border and border-spacing to zero to avoid any unexpected space in the table.

To provide the padding in the padding cell, we have to implement the <td style= "padding:0;">. If we don't do this, then a small amount of space will be provided between the cells.

A Note on Using CSS Padding Shorthand

We can write the CSS padding basically in three ways. The first way is to provide a single value in the padding syntax. If we do this, then that particular amount of space will be provided on every side. The second way is to provide two values in the padding syntax.

If we do this, then one value will be provided to both the top and button sides, and another value will be provided on the left and right sides. The 3rd way is we can provide four values to the padding syntax. If we do this, each amount will be provided to each side of the table. Also, we have to provide the spacer divs or spacer cells in the padding. Also, we must provide the non-breaking space character ( ), which will provide the space between matching height and line height. We can set the spacer cell with the help of the below syntax.

<tr><td style="line-height:10px;height:10px;mso-line-height-rule:exactly;">&nbsp;</td></tr>

Also, we can set the spacer div with the help of the below syntax.

<div style="line-height:10px;height:10px;mso-line-height-rule:exactly;">&nbsp;</div>

Adding the Main Table

Now we can provide a table where all the mail will be displayed. It will take 602 pixels for the creation of the table. Six hundred pixels will be taken for the width of the email. The remaining 2 pixels will be taken for the table's border on both sides by 1 pixel. It will look like this.

Example 3:

  <table role="presentation" style="width:602px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;">
      <tr>
                <td style="padding:0;">

                        Hello!

                </td>
         </tr>
 </table>

Create the HTML Email Template Structure and Header

In the above section, we have created some rows by providing some code. Now, we can copy the above code, and we can paste those codes for the duplicate row.

Example 4:

<table role="presentation" style="width:602px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;">
         <tr>
                <td style="padding:0;">
                        Row 1
                </td>
         </tr>
         <tr>
                <td style="padding:0;">
                        Row 2
                </td>
         </tr>
         <tr>
                <td style="padding:0;">
                        Row 3
                </td>

         </tr>
 
 </table>

Now, we can provide some background CSS properties for each row inside the style tag.

Example 5:

<table role="presentation" style="width:602px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;">

         <tr>
                <td style="padding:0;background:#70bbd9;">
  
                        Row 1

                </td>
 
         </tr>
 
         <tr>
 
                <td style="padding:0;">
 
                        Row 2
 
                </td>
 
         </tr>
 
         <tr>
 
                <td style="padding:0;background:#ee4c50;">
 
                        Row 3
 
                </td>
         </tr>   
 </table>

Now, in the row1 section, we have to provide an image for the increase in the appearance of the email template. In the below code, we have inserted the image in row 1.

  <td align="center" style="padding:40px 0 30px 0;background:#70bbd9;">
         <img src="images/h1.png" alt="" width="300" style="height:auto;display:block;" />
 
 </td>

Here, we have to specify the width of the image by giving style= "width:300px. Then, we have to provide the height as auto and the display as a block, which provides a good space between the image and the border.

Create the Content Area

After completing the header part of the email template, we have to go for the content area of the email template. We have to provide some padding in the row2 section. We have to write the code for this like below.

<tr>
 
         <td style="padding:36px 30px 42px 30px;">
 
                Row 2
 
         </td>
 
 </tr>

Now, inside row 2, we have inserted some nested tables. We can nest them without taking the help of colspan and rowspan. The code should be similar to the below code.

<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;">
 
         <tr>
 
                <td style="padding:0;">
 
                        Row 1
 
                </td>
 
         </tr>
 
         <tr>
 
                <td style="padding:0;">
 
                        Row 2
 
                </td>
 
         </tr>
 
 </table>

We have to set the width of the table as 100%. Now we have to add some content for the row 1. Here, we have inserted some random text. The code will look like as below.

  <h1>Creating Email Magic</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan et dictum, nisi libero ultricies ipsum, posuere neque at erat.</p>
    
 <p><a href="http://www.example.com">In tempus felis blandit</a></p>
 
Now, in the place of row 1, we have to insert some content and some heading. So, to do this, we have to write in the place of row 1.
  <h1>Creating Email Magic</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan et dictum, nisi libero ultricies ipsum, posuere neque at erat.</p>
 <p><a href="http://www.example.com">In tempus felis blandit</a></p>

In the next step, we are going to add two more columns in the row2 section. After doing this, it will provide some gap between the two rows. To do this, we have to provide some style property to the row element. First, we have to set the font size and line height as zero.

Then, we have to add & in the middle of the cell to provide some space between the two rows. We also have to set the vertical alignment as top. After doing all that stuff, we have to write the below code in the place of row 2.

<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;">
         <tr>

                <td style="width:260px;padding:0;vertical-align:top;">
 
                        Column 1
                </td>

                <td style="width:20px;padding:0;font-size:0;line-height:0;">�</td>
                <td style="width:260px;padding:0;vertical-align:top;">
 
Column 2

                </td>
 
         </tr>
 </table>

Now, we have to add the image and content for the web page. We have to take the help of <p> because margins are very well supported here. Now, we are going to add the code for column 1 and column 2.

  <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;">
 
         <tr>
 
<td style="width:260px;padding:0;vertical-align:top;">
 
                        <p><img src="images/left.gif" alt="" width="260" style="height:auto;display:block;" /></p>
 
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, est nisi libero ultricies ipsum, in posuere mauris neque at erat.</p>
                        <p><a href="http://www.example.com">Blandit ipsum volutpat sed</a></p>

                </td>
 
                <td style="width:20px;padding:0;font-size:0;line-height:0;">�</td>
 
                <td style="width:260px;padding:0;vertical-align:top;">
 
                        <p><img src="images/right.gif" alt="" width="260" style="height:auto;display:block;" /></p>

                        <p>Morbi porttitor, eget est accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed.</p>
 
                        <p><a href="http://www.example.com">In tempus felis blandit</a></p>
 
                </td>
         </tr>
 
 </table>

Now, we have to set the height of the image attribute by providing the width attribute inside the header of the image tag.

Style the Email Template Footer

Now, we have to add some code for the footer section. We have to write the below code in the footer section.

  <tr>
         <td style="padding:30px;background:#ee4c50;">
              Row 3
         </td>
 </tr>

After doing this, we have to add two more columns inside the row3 section. We have to provide 50% width for each column. Then we have to set the the left set to align= "left" and right to align= "right". By doing this, both the content will be placed in their appropriate situation.

  <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;">

         <tr>

                <td style="padding:0;width:50%;" align="left">

                        Left Column
 
                </td>

                <td style="padding:0;width:50%;" align="right">
 
                        Right Column
 
                </td>
         </tr>
 
 </table>

Now, we have to add some paragraphs in the place of the left column.

<p>&reg; Someone, Somewhere 2021<br/><a href="http://www.example.com">Unsubscribe</a></p>

Now, we have to create another section for the social media icon. So we have to write the below code in place of the right column.

  <table role="presentation" style="border-collapse:collapse;border:0;border-spacing:0;">
 
         <tr>
 
                <td style="padding:0 0 0 10px;width:38px;">

                        <a href="http://www.twitter.com/"><img src="images/tw.png" alt="Twitter" width="38" style="height:auto;display:block;border:0;" /></a>
 
                </td>
 
                <td style="padding:0 0 0 10px;width:38px;">
 
                        <a href="http://www.facebook.com/"><img src="images/fb.png" alt="Facebook" width="38" style="height:auto;display:block;border:0;" /></a>
 
                </td>
         </tr>
 </table>

Style the Text

We also have to provide some style for the better appearance of the text on the web page.

Important Note when using Paragraph and Heading Tags

First of all, we have to specify the top and bottom margins when we use the paragraph and heading tags (p, h1, h2, etc.). Then, we also have to ensure that we have set the margin property as zero. Then, we have to provide the text color as #153643.

  <td style="padding:0 0 36px 0;color:#153643;">
 
         <h1 style="font-size:24px;margin:0 0 20px 0;font-family:Arial,sans-serif;">Creating Email Magic</h1>
 
         <p style="margin:0 0 12px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan et dictum, nisi libero ultricies ipsum, posuere neque at erat.</p>
 
         <p style="margin:0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"><a href="http://www.example.com" style="color:#ee4c50;text-decoration:underline;">In tempus felis blandit</a></p>
  
 </td>

Then, we also have to provide the font family property. After doing all the things, the entire code will be similar to the below code.

  <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;">
         <tr>
 
                <td style="width:260px;padding:0;vertical-align:top;color:#153643;">
 
                        <p style="margin:0 0 25px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"><img src="images/left.gif" alt="" width="260" style="height:auto;display:block;" /></p>
 
                        <p style="margin:0 0 12px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, est nisi libero ultricies ipsum, in posuere mauris neque at erat.</p>
 
                        <p style="margin:0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"><a href="http://www.example.com" style="color:#ee4c50;text-decoration:underline;">Blandit ipsum volutpat sed</a></p>
 
                </td>
 
                <td style="width:20px;padding:0;font-size:0;line-height:0;">�</td>
                <td style="width:260px;padding:0;vertical-align:top;color:#153643;">
 
                        <p style="margin:0 0 25px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"><img src="images/right.gif" alt="" width="260" style="height:auto;display:block;" /></p>
 
                        <p style="margin:0 0 12px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;">Morbi porttitor, eget est accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed.</p>
 
                        <p style="margin:0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"><a href="http://www.example.com" style="color:#ee4c50;text-decoration:underline;">In tempus felis blandit</a></p>
                </td>
 
         </tr>
    
 </table>
Finally, we have to provide some style to the footer part.
  <td style="padding:30px;background:#ee4c50;">
 
     <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;font-size:9px;font-family:Arial,sans-serif;">

Complete Code

After merging all the above codes, the complete code will be like the one below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="x-apple-disable-message-reformatting">
  <title>Email Template</title>
  <!--[if mso]>
  <noscript>
    <xml>
     
<o:OfficeDocumentSettings>
       
<o:PixelsPerInch>96</o:PixelsPerInch>
     
</o:OfficeDocumentSettings>
    </xml>
  </noscript>
  <![endif]-->
  <style>
    body {
      margin: 0;
      padding: 0;
     
background-color: #f7f7f7;
      font-family: Arial, sans-serif;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      border: 0;
      border-spacing: 0;
      background: #ffffff;
    }

    td {
      padding: 0;
    }

    h1 {
      font-size: 28px;
      margin: 0 0 20px 0;
      font-family: Arial, sans-serif;
      color: #333333;
    }

    p {
      margin: 0 0 12px 0;
      font-size: 16px;
      line-height: 24px;
      font-family: Arial, sans-serif;
      color: #666666;
    }

    a {
      color: #ee4c50;
      text-decoration: none;
    }

    a: hover {
      text-decoration: underline;
    }

    .container {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      background: #ffffff;
      border: 1px solid #cccccc;
      text-align: left;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .header {
      padding: 40px 0 30px 0;
      background: #70bbd9;
      text-align: center;
    }

    .header img {
      width: 300px;
      height: auto;
      display: block;
      margin: 0 auto;
    }

    .content {
      padding: 36px 30px 42px 30px;
    }

    .left-column,
    .right-column {
      width: 50%;
      vertical-align: top;
      color: #333333;
    }

    .left-column img,
    .right-column img {
      width: 100%;
      height: auto;
      display: block;
      margin-bottom: 25px;
    }

    .footer {
      padding: 30px;
      background: #ee4c50;
      font-size: 12px;
      font-family: Arial, sans-serif;
    }

    .footer p {
      margin: 0;
      font-size: 14px;
      line-height: 16px;
      color: #ffffff;
    }

    .footer a {
      color: #ffffff;
      text-decoration: underline;
    }

    .social-icons {
      padding-left: 10px;
    }

    .social-icons a {
      color: #ffffff;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <img src="https://assets.codepen.io/210284/h1.png" alt="Header Image" />
    </div>
    <div class="content">
     
<h1>Creating Email Magic</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan et dictum, nisi libero ultricies ipsum, posuere neque at erat.
      </p>
      <p>
        <a href="http://www.example.com">In tempus felis blandit</a>
      </p>
      <table>
        <tr>
          <td class="left-column">
            <img src="https://assets.codepen.io/210284/left.gif" alt="Left Column Image" />
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, est nisi libero ultricies ipsum, in posuere mauris neque at erat.
            </p>
            <p>
              <a href="http://www.example.com">Blandit ipsum volutpat sed</a>
            </p>
          </td>
          <td class="right-column">
            <img src="https://assets.codepen.io/210284/right.gif" alt="Right Column Image" />
            <p>
              Morbi porttitor, eget est accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed.
            </p>
            <p>
              <a href="http://www.example.com">In tempus felis blandit</a>
            </p>
          </td>
        </tr>
      </table>
    </div>
    <div class="footer">
     
<p>� Someone, Somewhere 2021<br/><a href="http://www.example.com">Unsubscribe</a></p>
      <div class="social-icons">
        <a href="http://www.twitter.com/"><img src="https://assets.codepen.io/210284/tw_1.png" alt="Twitter" width="38" /></a>
        <a href="http://www.facebook.com/"><img src="https://assets.codepen.io/210284/fb_1.png" alt="Facebook" width="38" /></a>
      </div>
    </div>
  </div>
</body>
</html>

Output: