Table of Contents

Mailtrap’s Guide on How to Build HTML Email

On September 30, 2019
16min read
Ira Varshavets Front-End Developer @Mailtrap

It’s commonly known that HTML email building differs from HTML web development. Moreover, it might be even more complicated because of the lack of unified rendering standards. It means that you should keep in mind the list of rules when creating an email template (if you would like it to display as designed in the inboxes then, of course 🙂 ). 

Even if you are planning to use one of the email building tools or an email framework, it’s still necessary to understand the basics of coding your own HTML email template.  

In this article, we will build an HTML email step by step, explain what to pay attention to as well as give some development tips.

Before we start, let’s quickly review several important things to remember.

What You Should Remember About HTML Email

  1. The main thing about emails is that there are no rendering standards. You never know for sure which email client your recipients prefer: there are dozens of options, including desktop, mobile, and web apps, which use different rendering engines. For example, some versions of Outlook use Microsoft Word as a rendering engine (!!!).  That’s why you should be careful with images, HTML tags, CSS styles, etc.
  2. To be rendered, your email first has to be delivered and not marked as spam. Here, there is no list of strict criteria as well. There is also a set of rules to follow to prevent your messages from going to spam. We discussed the spam filters’ algorithms in this article. We will review the related coding tips later in this post. As for the general recommendations,
    • keep the email size around 100 KB (perfect) or no more than 250 KB
    • be careful with email attachments (it might be better to provide a link to the file than enclosing it)
    • don’t abuse media content, images, embedded forms 
  3. Preview and test your HTML before sending it.

Test Your Emails Now

How to make your email responsive

Another important note from the “what you should remember about HTML email” section: it should be responsive. So that the resulting email will display and look as designed on any type of device and the size of the screen.

To make your email template responsive, you should use media queries –  the CSS components, which adjust the layout and text size to the device screen. You might find the information that Gmail doesn’t support media queries and many developers have related issues. It was true before September 2016. Now Gmail supports queries against the screen width, orientation, and resolution, as per their documentation. 

Also, there are terms like “scalable” and “fluid” templates, which refer to the simple layout and usage of the percentage-based sizing.

In this tutorial, we will stick to the media queries. 

Coding a simple HTML email

Step 1. DOCTYPE

The first step is defining which doctype to use. It is a document type declaration important for the proper rendering. There are several popular versions of HTML and XHTML doctypes. Now HTML5 and XHTML 1.0 Transitional are the most commonly used versions. XHTML mainly helps to interpret “bad” markup, but you can work with the modern standards using HTML5. The choice between them is a matter of preference. We prefer HTML5. For example, Mailchimp keeps using XHTML while Sendgrid leans toward HTML5. So, here is the code for both:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

XHTML 1.0 Transitional

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

HTML5

As you can see, along with the doctype we are adding extra information about the language (in our case, it is “en” for English) and specify XML details. VML is an obsolete type of markup but we should keep in mind old versions of Outlook (and MS Word as a rendering engine).

Step 2. Header section

There are two required sections in the HTML email structure: header and body. In header, we specify meta tags and title:

  • <meta http-equiv=”Content-Type” /> is used to instruct rendering engines on how to process the text and special characters in your message. 
  • <meta name=”viewport” /> this meta tag is used for creating a responsive HTML email. It defines the proper scaling of your message on different devices.
  • <title> </title> is nothing else but the title of your email 🙂 It will be displayed if a recipient opens the message in browser or shares it in another available way. 
<head>
<title>Learning how to code an HTML email</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<style>
<!--- CSS will be here --->
</style>
</head>

CSS styling (inlined!)

CSS inlining means that you should put CSS styling to the header section and also repeat it throughout the HTML document, with each new block. It helps avoid removing CSS styles from the HTML header by some email clients. 

CSS inlining is quite a complicated job and an infinite field for mistakes. This is why it is popular (and even recommended) to use tools, which can do it for you, the CSS inliners. We will share more details in the “Useful tools” section of this article. 

Media queries

With media queries, we specify how different styling elements should be treated by rendering engines. For example, here is how it will look for screens between 590 and 1270 px:

<style type="text/css">
                @media only screen and (max-width:590px){
                    .c1{
                        background-color:white !important;
                    }
                    .c3a,
                    .c3b{
                        width:100% !important;
                    }
                }
                @media only screen and (max-width:1270px){
                    .c2,.c4{
                        background-color:#f7f7f7 !important;
                    }
                }
                @media only screen and (min-width:590px) and (max-width:1270px){
                    .c1{
                        background-color:#f7f7f7 !important;
                    }
                }
            </style>

Step 3. HTML message body

Message body is the actual visible content of the email, which starts with formatting. To display the email structure as designed in all email clients, it is recommended to format it with nesting tables. At least, we should create two tables: 

  • Email template container, the core table –  set its width to 100%. This way, you will cover the message space. It is also a good practice to set the margin, padding, cellpadding, and cellspacing to zero. This will exclude unexpected space inside this table.
  • Email content table, placed inside the core one. Set its width up to 600 px. This is an old good golden standard properly supported by all main email clients. Lately, devices with the 800 px screen width became more popular, so that you can try experimenting with 700 px for this table. Align this table to the center. 

And remember, no colspan or rowspan tags!

Here is how it looks:

<body>
<center>
<!-- Email template container-->
<table border="0" cellpadding="0" height="100" width="100%">
<tr>
<td align="center" valign="top" class="email-container">

<!-- Email content -->
<table border="0" cellpadding="0" cellspacing="0" width="580">

<!-- Here we will add further content -->
</body>

Step 4. Email content

This paragraph might be endless: depending on the chosen template, you can add text, images, buttons (CTAs), in different colors and variations. Put each text block or an element to a separate cell and apply inline styling. 

Here we will demonstrate the simple structure of the content block as well as add a button as a separate table:

<!-- Content -->
<tr>
<td> align="left" valign="top" class="content">
<p>And this is the content itself - everything you actually want to say to your recipient</p>

<!-- Button as a separate table -->
<table border="0" cellpadding="0" width="335" class="button-block">
<tr>
<td align="center" valign="middle" class="button">
Push the button!
</td>
</tr>
</table>

</td>
</tr>

What to pay attention to when adding elements to the email content

  1. One element = one class. Just because multiple classes are not supported.
  2. Padding and cellpadding. Use these attributes to identify the space size between the cell content and the cell wall. 
  3. If an HTML attribute exists, prefer it to CSS styles, keep it simple.
  4. Avoid JavaScript, Flash, and any other complexity. You can embed videos or GIFs to your email template but there is also a risk that they won’t be reproduced in some email clients.
  5. Treat images seriously. It’s quite difficult to avoid images in the email templates. But don’t overuse them and follow these several rules:
    • decide on the way to embed images to your message: CID attachments, base64 encoding, or linked images. We have explained all the details in this post.
    • Make your images “Retina-ready” to display them properly on the Retina displays (for example, Mac devices).
    • Follow the latest trends. For example, more and more people use voice assistants (like Alexa) to reproduce texts and emails in particular. It means that if images used in your template contain crucial information, it will be missed by your recipient. Voice assistants ignore alt tags as well. 
    • Be sure to optimize your image file sizes. You may be familiar with this concept since it’s a well-known best practice for site’s page speed improvements. But it can also improve email load time and deliverability.

Step 5. Don’t forget about the footer!

The footer is the final section of the message. It is important to include the sender’s information as well as unsubscribe options, to comply with CAN-SPAM and GDPR regulations. Also, you can add social media links and some additional information. 

<!-- Footer -->
<tr>
<td align="center" valign="middle" class="footer">
<p>Footer text (don't forget about CAN-SPAM and GDPR!)</p>
</td>
</tr>

HTML email validation and testing 

HTML emails require thorough testing. So, as soon as you have put the last symbol to your HTML template, run several checks. It is a good practice to run tests in small chunks: build your template structure first, then validate it, add main content and validate it again, and in the end, apply styling and run final tests and preview. This will help you to spot mistakes right away and avoid a cascading effect, when a small error in the beginning causes more and mistakes. 

Useful tools for HTML email building and testing

HTML email creation is tricky and requires much attention and effort. Fortunately, there is a bunch of tools, which can make your HTML coding life easier.

  1. CSS inliner. As we have already mentioned, CSS inliners help you to inline CSS with the markup. Almost every tool, which offers an HTML editor, has its own CSS inliner. We prefer Premailer.io, an independent online inliner.
  2. Compatibility tables for CSS support in HTML emails. Can I use in HTML emails shows whether the most popular CSS elements are supported in major email clients, including Gmail, iOS 12 mail app, several Outlook version, and other.
  3. HTML preview and testing. The choice of tools depends on your preferences. Every HTML builder provides preview and testing options as well as there is a list of solely testing tools. Mailtrap for example can show you exact HTML and CSS errors in your emails.
  4. HTML templates and builders. There is a variety of options – from free and ready to use HTML email templates to HTML/CSS frameworks and template builders. We have gathered some of the most popular options in this post.

Inspect&Debug Your Emails

HTML email templates: full examples

Here is the full code of the structure we have explored above. You can use it as a blank template to build your own email structure.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Learning how to code an HTML email</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<style>
<!--- CSS will be here --->
<style type="text/css">
                @media only screen and (max-width:590px){
                    .c1{
                        background-color:white !important;
                    }
                    .c3a,
                    .c3b{
                        width:100% !important;
                    }
                }
</style>
</head>
<body>
<center>
<!-- Email template container-->
<table border="0" cellpadding="0" height="100" width="100%">
<tr>
<td align="center" valign="top" class="email-container">

<!-- Email content -->
<table border="0" cellpadding="0" cellspacing="0" width="580">

<!-- Header -->
<tr>
<td align="center" valign="middle" class="header" >
<p>This is the header text of our first beautiful HTML email</p>
</td>
</tr>

<!-- Content -->
<tr>
<td> align="left" valign="top" class="content">
<p>And this is the content itself - everything you actually want to say to your recipient</p>

<!-- Button as a separate table -->
<table border="0" cellpadding="0" width="335" class="button-block">
<tr>
<td align="center" valign="middle" class="button">
Push the button!
</td>
</tr>
</table>

</td>
</tr>

<!-- Footer -->
<tr>
<td align="center" valign="middle" class="footer">
<p>Footer text (don't forget about CAN-SPAM and GDPR!)</p>
</td>
</tr>

</table>

</td>
</tr>
</table>
</center>
</body>

</html>
</body>

And here is another email template, with images and other elements, and comments added to the code. It’s good practice to comment your code – it will simplify working with your templates for other developers.

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mailtrap</title>
    <style>
      body{
        height:100% !important;
        margin:0;
        padding:0;
        width:100% !important;
      }
      img{
        border:0;
        outline:none;
        text-decoration:none;
      }
      img{
        width:auto;
        max-width:100%;
        display:block;
      }
      a:hover{
        color:#009999 !important;
      }
      a:active{
        color:#009999 !important;
      }
      a:visited{
        color:#009999 !important;
      }
      .ReadMsgBody{
        width:100%;
      }
      .ExternalClass{
        width:100%;
      }
      img{
        -ms-interpolation-mode:bicubic;
      }
      body{
        -ms-text-size-adjust:100%;
        -webkit-text-size-adjust:100%;
      }
      body{
        font-family:Arial,sans-serif;
        font-size:16px;
        font-weight:normal;
        line-height:24px;
        color:#4A4A4A;
      }
      body{
        background-color:#f4f4f4;
      }
      .btn a:hover{
        color:#fff !important;
      }
      .btn a:active{
        color:#fff !important;
      }
      .btn a:visited{
        color:#fff !important;
      }
      @media only screen and (max-width: 600px){
          body{
              width:100% !important;
              min-width:100% !important;
              background-color: #ffffff !important;
          }
      }	@media only screen and (max-width: 600px){
              body{
                  -webkit-text-size-adjust:none !important;
              }

      }	@media only screen and (max-width: 600px){
              table{
                  -webkit-text-size-adjust:none !important;
              }

      }	@media only screen and (max-width: 600px){
              td{
                  -webkit-text-size-adjust:none !important;
              }

      }	@media only screen and (max-width: 600px){
              p{
                  -webkit-text-size-adjust:none !important;
              }

      }	@media only screen and (max-width: 600px){
              a{
                  -webkit-text-size-adjust:none !important;
              }

      }	@media only screen and (max-width: 600px){
              li{
                  -webkit-text-size-adjust:none !important;
              }

      }	@media only screen and (max-width: 600px){
              blockquote{
                  -webkit-text-size-adjust:none !important;
              }

      }	@media only screen and (max-width: 600px){
              table{
                  max-width:580px !important;
                  width:100% !important;
              }

      }	@media only screen and (max-width: 600px){
              #bodyTable{
                  background-color: #ffffff !important;
              }

      } @media only screen and (max-width: 600px){
              #bodyCell{
                  padding:0 !important;
              }

      }	@media only screen and (max-width: 600px){
              .column{
                  display:block !important;
                  width:100% !important;
                  padding:0 0 15px !important;
                  box-sizing:border-box;
              }

      }	@media only screen and (max-width: 600px){
              .column-22{
                  display:block !important;
                  width:100% !important;
                  padding:0 0 15px !important;
                  box-sizing:border-box;
              }

      }	@media only screen and (max-width: 600px){
              .column-65{
                  display:block !important;
                  width:100% !important;
                  padding:0 0 15px !important;
                  box-sizing:border-box;
              }

      }	@media only screen and (max-width: 600px){
              .column-78{
                  display:block !important;
                  width:100% !important;
                  padding:0 0 15px !important;
                  box-sizing:border-box;
              }

      }	@media only screen and (max-width: 600px){
              .column-25{
                  display:block !important;
                  width:100% !important;
                  padding:0 0 15px !important;
                  box-sizing:border-box;
              }

      }	@media only screen and (max-width: 600px){
              .column-50{
                  display:block !important;
                  width:100% !important;
                  padding:0 0 15px !important;
                  box-sizing:border-box;
              }

      }	@media only screen and (max-width: 600px){
              .column:last-child{
                  padding-bottom:0 !important;
              }

      }	@media only screen and (max-width: 600px){
              .column-22:last-child{
                  padding-bottom:0 !important;
              }

      }	@media only screen and (max-width: 600px){
              .column-65:last-child{
                  padding-bottom:0 !important;
              }

      }	@media only screen and (max-width: 600px){
              .column-78:last-child{
                  padding-bottom:0 !important;
              }

      }	@media only screen and (max-width: 600px){
              .column-25:last-child{
                  padding-bottom:0 !important;
              }

      }	@media only screen and (max-width: 600px){
              .column-50:last-child{
                  padding-bottom:0 !important;
              }

      }	@media only screen and (max-width: 600px){
              .header-logo{
                  padding:15px !important;
              }

      } @media only screen and (max-width: 600px){
              .header{
                  padding:20px !important;
                  border-radius:0 !important;
              }

      }	@media only screen and (max-width: 600px){
              .section{
                  padding:20px !important;
                  border-radius:0 !important;
              }

      }	@media only screen and (max-width: 600px){
              .header{
                  background:#3F3D55 !important;
              }

      }	@media only screen and (max-width: 600px){
              .product-block{
                  background:#04158E !important;
              }

      } @media only screen and (max-width: 600px){
              .footer .icon-text{
                  display:none !important;
              }

      }	@media only screen and (max-width: 600px){
              .is-fittogrid{
                  width:100% !important;
                  height:auto !important;
              }

      }	@media only screen and (max-width: 600px){
              .mobile-centered-container{
                  text-align:center !important;
              }

      }	@media only screen and (max-width: 600px){
        .mobile-centered-item{
          display:inline-block !important;
        }
      }
  </style>
  </head>
  <body style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background: #f4f4f4; color: #4A4A4A; font-family: Arial, sans-serif; font-size: 16px; font-weight: normal; height: 100% !important; line-height: 24px; margin: 0; padding: 0; width: 100% !important" bgcolor="#f4f4f4">
    <center>
      <table border="0" cellpadding="0" cellspacing="0" width="100%" id="bodyTable" style="height:100% !important;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:#f4f4f4;border-collapse:collapse;color:#4A4A4A;font-family:Arial, sans-serif;font-size:16px;font-weight:normal;line-height:24px;margin:0;mso-table-lspace:0pt;mso-table-rspace:0pt;padding:0;width:100% !important;" bgcolor="#f4f4f4">
        <tbody>
          <tr>
            <td align="center" valign="top" id="bodyCell" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;height:100% !important;margin:0;mso-table-lspace:0pt;mso-table-rspace:0pt;padding:20px;width:100% !important;">
              <!-- // BEGIN EMAIL -->
              <table border="0" cellpadding="0" cellspacing="0" width="560" class="main" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                <tbody>
                  <!-- // OUTSIDE LOGO -->
                  <tr>
                    <td align="center" valign="top" class="header-logo" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;padding:10px 50px 30px;">
                      <!-- // Logo block // -->
                      <a href="//sandbox.mailtrap.net" target="_blank" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#4DC3C9;text-decoration:none;"><img src="https://link-to-your-hosted-image.png" alt="Mailtrap" width="146" height="30" style="-ms-interpolation-mode: bicubic; border: 0; display: block; max-width: 100%; outline: none; text-decoration: none; vertical-align: middle; width: auto"></a>
                    </td>
                  </tr>
                  <tr>
                    <td align="left" valign="top" class="header" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:#3F3D55 url('https://link-to-another-hosted-image.png') repeat-y top;background-size:560px 150px;border-radius:5px 5px 0 0;mso-table-lspace:0pt;mso-table-rspace:0pt;padding:28px 130px;" bgcolor="#3F3D55">
                      <!-- // Header block // -->
                      <table border="0" cellpadding="0" cellspacing="0" width="100%" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                        <tbody>
                          <tr>
                            <td align="center" valign="middle" class="mobile-centered-container" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                              <h1 class="header-heading mobile-centered-item" style="color:#fff;font-size:24px;letter-spacing:-.43px;line-height:30px;margin:0;padding:0 0 20px;">Mailtrap introduces Bcc Test, Email Size support</h1>
                              <div>
                                <p class="header-text mobile-centered-item" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#fff;font-size:11px;line-height:14px;margin:0;padding-bottom:0;">
                                  <a href="//sandbox.mailtrap.net" target="_blank" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#ffffff !important;text-decoration:none;"><strong>Mailtrap</strong></a>
                                  <span style="padding: 0 11px 0 10px">|</span>Safe Email Testing for Dev Teams
                                  </p>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr>
                      <td align="left" valign="top" class="section is-top-merged" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:#fff;border-radius:0 0 5px 5px;mso-table-lspace:0pt;mso-table-rspace:0pt;padding:20px 50px 40px;" bgcolor="#ffffff">
                        <!-- Content section -->
                        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                          <tbody>
                            <tr>
                              <td align="center" valign="top" class="section-heading" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;padding-bottom:15px;">
                                <h5 style="color:#9B9B9B;font-size:11px;margin:0;padding:0;text-transform:uppercase;">Feature</h5>
                              </td>
                            </tr>
                            <tr>
                              <td align="left" valign="top" class="content-item" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;padding-bottom:25px;">
                                <h1 style="color:#4A4A4A;font-size:24px;letter-spacing:-.7px;line-height:29px;margin:0;padding:0;">
                                  <span class="highlighted-text" style="color: #000">Bcc Support</span>
                                </h1>
                              </td>
                            </tr>
                            <tr>
                              <td align="left" valign="top" class="content-item" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;padding-bottom:25px;">
                                <!-- // Example block // -->
                                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                                  <tbody>
                                    <tr>
                                      <td align="left" valign="top" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                                        <img src="https://link-to-yet-another-hosted-image.png" alt="verification changes" class="is-fittogrid" style="-ms-interpolation-mode: bicubic; border: 0; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto">
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                            <tr>
                              <td align="left" valign="top" class="content-item" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;padding-bottom:25px;">
                                <p style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0;">You asked - we did. The most requested feature is live now. Mailtrap compares RCPT TO and email headers and displays the difference in the Bcc field. It gives you better control over your recipients and emails you actually sent. We explain how Bcc works and how you can benefit from it.</p>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <table border="0" cellpadding="0" cellspacing="0" align="center" class="btn" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                          <tbody>
                            <tr>
                              <td align="center" valign="middle" class="btn-content" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:#FFE54C;border:2px solid #4a4a4a;border-radius:30px;color:#fff;mso-table-lspace:0pt;mso-table-rspace:0pt;padding:4px 20px;" bgcolor="#A2F4DF">
                                <a href="/blog/cc-bcc-in-smtp" target="_blank" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#4a4a4a !important;display:block;font-family:Arial, sans-serif;font-size:13px;font-weight:bold;text-decoration:none;">Read more</a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr>
                      <!-- Section separator -->
                      <td align="left" valign="top" class="section-spacer" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;padding:15px;"></td>
                    </tr>
                    <tr>
                      <td align="left" valign="top" class="section" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;border-radius:0 0 5px 5px;color:#4A4A4A;mso-table-lspace:0pt;mso-table-rspace:0pt;padding:40px 50px;background:#ffffff url('https://marketing-image-production.s3.amazonaws.com/uploads/3978505229776794b53cf3f883690e124e7bb6857cfeec1fc679571a5fa2bdb63fd540dc5ae7d3e63ee0391d80feb0d0494b7b6e16d987fcc9354a58e57ea6e3.png') no-repeat top;background-size:560px 4px;" bgcolor="#ffffff">
                        <!-- Own products block -->
                        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                          <tbody>
                            <tr>
                              <!-- Footer -->
                              <td align="center" valign="top" class="footer" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;padding-top:20px;">
                                <!-- Content block -->
                                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                                  <tbody>
                                    <tr>
                                      <td align="center" valign="top" class="footer-heading" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:url('https://gallery.mailchimp.com/bfdf3c6997809dba3c6682bcf/images/cabdbec1-8813-44da-b186-baec3b4f5bbd.png') repeat-x top;background-size:20px;mso-table-lspace:0pt;mso-table-rspace:0pt;padding-bottom:25px;">
                                        <h2 style="background:#ffffff;color:#4A4A4A;display:inline-block;font-size:16px;letter-spacing:-.53px;line-height:20px;margin:0;padding:0 10px;">Follow Us</h2>
                                      </td>
                                    </tr>
                                    <tr>
                                      <td align="center" valign="middle" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                                        <!-- Grid -->
                                        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                                          <tbody>
                                            <tr>
                                              <!-- Column -->
                                              <td align="center" valign="middle" class="social-item" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                                                <a href="https://facebook.com/Mailtrap/" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#4A4A4A !important;font-size:12px;font-weight:bold;letter-spacing:-.5px;line-height:14px;text-decoration:none;" target="_blank"><img src="https://marketing-image-production.s3.amazonaws.com/uploads/852b2e2fbd40963c0291f1bec533890a216351ecc0d249726c70327c6dc905c10067a48bef55b977ecf925267dbf3f90d7581684bc04ff15747a89de481375f8.png" width="36" height="36" alt="Facebook Icon" style="-ms-interpolation-mode: bicubic; border: 0; display: inline-block; max-width: 100%; outline: none; padding-right: 10px; text-decoration: none; vertical-align: middle; width: auto"><span class="icon-text">Facebook</span></a>
                                              </td>
                                              <!-- Column -->
                                              <td align="center" valign="middle" class="social-item" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                                                <a href="https://twitter.com/Mailtrap" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#4A4A4A !important;font-size:12px;font-weight:bold;letter-spacing:-.5px;line-height:14px;text-decoration:none;" target="_blank"><img src="https://marketing-image-production.s3.amazonaws.com/uploads/a95362838b314d3f2d265bf994034ff288b4ad533f14d369b4ce8b729aede1f0b340dc844034ba1ed758d0559fcbad36658abfddc4e0e2405c42fb719bd96973.png" width="36" height="36" alt="Twitter Icon" style="-ms-interpolation-mode: bicubic; border: 0; display: inline-block; max-width: 100%; outline: none; padding-right: 10px; text-decoration: none; vertical-align: middle; width: auto"><span class="icon-text">Twitter</span></a>
                                              </td>
                                              <!-- Column -->
                                              <td align="center" valign="middle" class="social-item" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                                                <a href="https://www.linkedin.com/company/mailtrap" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#4A4A4A !important;font-size:12px;font-weight:bold;letter-spacing:-.5px;line-height:14px;text-decoration:none;" target="_blank"><img src="https://marketing-image-production.s3.amazonaws.com/uploads/326bb956e1b0f02a26affd9a584119d9838c39cf04d1c28b07569c28c6532b4a94b46961b9306b80d4e68e12007f6628f8f1797379c40869ec629862dee38d9d.png" width="36" height="36" alt="Twitter Icon" style="-ms-interpolation-mode: bicubic; border: 0; display: inline-block; max-width: 100%; outline: none; padding-right: 10px; text-decoration: none; vertical-align: middle; width: auto"><span class="icon-text">Linked In</span></a>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <!-- END EMAIL // -->
              </td>
            </tr>
          </tbody>
        </table>
      </center>
    </body>
</html>

And here is how it looks in the email client:

Mailtrap email campaign on Bcc support, HTML/CSS template

Yes, this is an element of the actual template we used when informing our Mailtrap users about Cc/Bcc feature release!

Article by Ira Varshavets Front-End Developer @Mailtrap
Create Your Free Account

In 3 Clicks

Sign Up Now