Introduction
In today's fast-paced digital era, where communication happens in a blink of an eye, email continues to play a crucial role in staying connected. Whether you are dispatching a newsletter, sharing a special deal, or crafting a tailored message, the manner in which you showcase your content holds significant importance. This is where HTML email templates step in; serving as the silent champions of contemporary email marketing and correspondence.
In today's era of crowded email inboxes, attracting the attention of your recipients and effectively conveying your message can be quite a formidable task. Fortunately, HTML email templates offer a solution to streamline this process. These adaptable templates provide you with the tools to craft visually attractive, mobile-friendly, and compelling emails that have the potential to make a significant impact on your readers.
In this tutorial, we will explore the process of creating an HTML email template using HTML and CSS. To accomplish this task, we need to adhere to the following steps:
Begin Your HTML Email Document
To begin, the initial step is to generate an HTML file where the HTML code will be composed. Following this, the language needs to be specified as English by specifying <html lang= "en">. Additionally, the XML file and Microsoft Office namespace must be included within the XML sections. The code snippet will resemble the following structure.
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>
Within the code snippet provided, initially, a meta tag was generated to guarantee appropriate text encoding and viewport scaling on various mobile devices. Another meta tag was included to prevent Apple's mail applications from irregularly adjusting sizes. Between the title tags, specific details are inserted between <!--[if mso]> and <![endif]-->.
Within the code snippet, we are required to script for Microsoft Outlook when running on Windows and implement it (mso = " Microsoft Outlook "). Additionally, we include XML markup to ensure the correct rendering of PNG images within Outlook on Windows. Embedded within the XML configuration, there is HTML markup that needs to be correctly rendered.
Within the <style> element, CSS properties are defined. Initially, rules are established for the primary elements to optimize the appearance of the GMAIL webmail interface.
Finally, we have added a styling rule for table and td elements to set a 2px solid black border for all elements within them.
- Establish the Body and Primary Table
Once the framework is established, the next step involves incorporating the content into our code. It is essential to input the following code snippet following the conclusion of the </head> marker.
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>
The margin within the body element is adjusted, and the padding of the body element is specifically set to zero to eliminate any unnecessary spaces. A table with a width of 100% is included to function as the body element for the email layout. Subsequently, additional body elements need to be nested inside the table element. Finally, the role attribute of "presentation" should be assigned to the table to enhance its accessibility for screen readers.
Next, it is necessary to configure the border-collapse property as collapse, and set both the border and border-spacing to zero in order to prevent any unintended gaps within the table.
In order to ensure proper spacing within the padding cell, it is essential to apply the <td style= "padding:0;">. Failure to do so may result in a slight gap between the cells.
A Note on Using CSS Padding Shorthand
The CSS padding can be specified in three different ways. One approach is to set a single value in the padding syntax, which will apply that specific amount of space uniformly on all sides. Another method is to specify two values in the padding syntax.
In one approach, a single value can be assigned to the top and bottom sides, while a different value can be assigned to the left and right sides. Alternatively, four values can be assigned to the padding syntax, with each value corresponding to a side of the table. It is essential to include spacer divs or cells within the padding. Additionally, the non-breaking space character ( ) can be utilized to create space between elements with matching height and line height. The following syntax can be used to define the spacer cell.
<tr><td style="line-height:10px;height:10px;mso-line-height-rule:exactly;"> </td></tr>
Moreover, we have the ability to position the spacer division using the following syntax.
<div style="line-height:10px;height:10px;mso-line-height-rule:exactly;"> </div>
Adding the Main Table
We can now generate a table that will showcase all the email content. The table will occupy a width of 602 pixels. The email content will span 600 pixels horizontally, with the remaining 2 pixels allocated for a 1-pixel border on each side of the table. This setup will present the table in the following manner.
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>
- Building the Structure and Header of an HTML Email Template
In the preceding section, rows were generated using specific code snippets. These codes can now be duplicated by copying and pasting them to create additional rows.
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>
Next, let's assign various CSS attributes to individual rows within 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>
In the section labeled "row1," we are required to include an image illustrating the enhancement of the email template. The code snippet below demonstrates the insertion of the image within row 1.
<td align="center" style="padding:40px 0 30px 0;background:#70bbd9;">
<img src="https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image" alt="" width="300" style="height:auto;display:block;" />
</td>
To set the image's width, we need to define it using style="width:300px". Additionally, the height should be set to auto and the display should be set to block, which ensures proper spacing between the image and the border.
- Establishing the Content Section
Once the header section of the email template is finished, the next step is to work on the content area. It is essential to include padding in the row2 section. Below is an example of how to write the necessary code for this task.
<tr>
<td style="padding:36px 30px 42px 30px;">
Row 2
</td>
</tr>
In the second row, nested tables have been included without the necessity of using colspan and rowspan attributes. The implementation should resemble the following code snippet.
<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>
The table width needs to be defined as 100%. Next, content needs to be included for the first row. In this case, arbitrary text has been inserted. The corresponding code snippet will appear as follows.
<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="https://logic-practice.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="https://logic-practice.com">In tempus felis blandit</a></p>
Moving forward, our next task involves incorporating two additional columns into the row2 segment. This action will result in creating space between the two rows. To achieve this, it is necessary to assign a style property to the row element. Initially, we must specify the font size and line height as zero.
Next, it is necessary to insert an ampersand symbol (&) within the cell to create separation between the two rows. Furthermore, the vertical alignment must be adjusted to the top. Once these modifications are made, the following code snippet should be inserted in lieu 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>
Next, it's time to incorporate both the image and content onto the webpage. Utilizing <p> will be advantageous due to its robust support for margins. Let's proceed by inserting the code snippets for both 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="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" 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="https://logic-practice.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="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" 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="https://logic-practice.com">In tempus felis blandit</a></p>
</td>
</tr>
</table>
Next, we need to define the height of the image attribute by specifying the width attribute within the header of the image tag.
- Customize the Footer of the Email Template
Next, it is necessary to incorporate some code into the footer section. The following code snippet should be included within the footer section.
<tr>
<td style="padding:30px;background:#ee4c50;">
Row 3
</td>
</tr>
Subsequently, we need to insert two additional columns within the row3 segment. Each column should be allocated a width of 50%. Subsequently, the alignment for the left column should be defined as "left," whereas the right column should be set to align="right." This adjustment ensures that both contents are accurately positioned.
<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>
Next, we need to insert paragraphs into the left column area.
<p>® Someone, Somewhere 2021<br/><a href="https://logic-practice.com">Unsubscribe</a></p>
Next, we need to establish a new segment for the social media icon. Therefore, we must input the following code instead of the content in 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="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" 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="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Facebook" width="38" style="height:auto;display:block;border:0;" /></a>
</td>
</tr>
</table>
- Style the Text
It is essential to apply styling to enhance the visual presentation of the text on the webpage.
Important Note when using Paragraph and Heading Tags
To begin, it is important to define the margins for the top and bottom when utilizing paragraph and heading tags such as p, h1, h2, and so on. Additionally, it is crucial to confirm that the margin property is established as zero. Lastly, the text color should be assigned 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="https://logic-practice.com" style="color:#ee4c50;text-decoration:underline;">In tempus felis blandit</a></p>
</td>
Next, we need to specify the font family property. Once these steps are completed, the code will resemble the example below.
<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="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" 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="https://logic-practice.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="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" 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="https://logic-practice.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
Once all the aforementioned codes are merged together, the resulting code will resemble the example provided 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://placehold.co/800x200/1abc9c/ffffff?text=Banner" 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="https://logic-practice.com">In tempus felis blandit</a>
</p>
<table>
<tr>
<td class="left-column">
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" 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="https://logic-practice.com">Blandit ipsum volutpat sed</a>
</p>
</td>
<td class="right-column">
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" 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="https://logic-practice.com">In tempus felis blandit</a>
</p>
</td>
</tr>
</table>
</div>
<div class="footer">
<p>� Someone, Somewhere 2021<br/><a href="https://logic-practice.com">Unsubscribe</a></p>
<div class="social-icons">
<a href="http://www.twitter.com/"><img src="https://placehold.co/200x150/1abc9c/ffffff?text=Sample+Image" alt="Twitter" width="38" /></a>
<a href="http://www.facebook.com/"><img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Facebook" width="38" /></a>
</div>
</div>
</div>
</body>
</html>
Output: