HTML Email TemplateIntroductionIn 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 DocumentFirst 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: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 <!--[if mso]> and <![endif]-->. 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.
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: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 ShorthandWe 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. Also, we can set the spacer div with the help of the below syntax. Adding the Main TableNow 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:
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:Now, we can provide some background CSS properties for each row inside the style tag. Example 5: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. 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.
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. 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. 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. 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. 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. Now, we have to set the height of the image attribute by providing the width attribute inside the header of the image tag.
Now, we have to add some code for the footer section. We have to write the below code in the footer section. 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. Now, we have to add some paragraphs in the place of the left column. 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.
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 TagsFirst 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. 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. Complete CodeAfter merging all the above codes, the complete code will be like the one below. Output: Next TopicHTML Textbox |