{"id":9543,"date":"2024-07-05T07:00:00","date_gmt":"2024-07-05T01:30:00","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=9543"},"modified":"2025-02-05T15:57:27","modified_gmt":"2025-02-05T10:27:27","slug":"create-html-email","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/create-html-email\/","title":{"rendered":"A Complete Guide to Create Your Own HTML Email"},"content":{"rendered":"\n

[This post was originally published on May 2022. It has been updated on<\/strong> 5th July, 2024]<\/strong><\/p>\n\n\n\n

Developing an HTML email is like the metamorphosis of a tadpole into a frog, undergoing many changes from concept to final delivery. Once the email marketer defines the purpose, the copywriter drafts the email according to the wireframe. Then, the email designer creates the design based on the wireframe. After design approval, the email developer transforms the PSD, AI, or PDF file into a pixel-perfect HTML email. This file is uploaded to the ESP and deployed after thorough testing to ensure flawless rendering.<\/p>\n\n\n\n

Since multiple people are involved in creating an HTML email<\/a>, even minor changes can take a long time to resolve. It typically takes 4-6 hours to develop an email template, and the intricacies of the process add to this time. While free HTML email templates<\/a> are available online, custom-made emails<\/a> tend to perform better.<\/p>\n\n\n\n

In this article, we will guide you on how to create an email template using simple email template HTML code, which you can use as a reference for basic troubleshooting of your email template HTML code.<\/p>\n\n\n\n

HTML Basics: How to Create Simple HTML Email Template?<\/h2>\n\n\n\n

A basic HTML email template includes two parts:<\/p>\n\n\n\n

  1. Header section<\/strong>: Any code placed between <head> and <\/head> is referred to as the header section. All the media queries, styling and CSS animations<\/a> are specified in this section.<\/li>
  2. Body<\/strong>: Any code placed between <body> and <\/body> is the body section and the rendering engine uses the code to create the HTML email structure.<\/li><\/ol>\n\n\n\n

    Step 1: How To Prepare Your HTML <head> Template?<\/strong><\/h2>\n\n\n\n

    The head section of a simple HTML email template looks like this. <\/p>\n\n\n\n

    <\/div>
    <\/div>
    <\/div><\/div>
    Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div>
    <!DOCTYPE html PUBLIC \u201c-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\u201d \u201chttps:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\u201d>\n<html xmlns=\u201chttps:\/\/www.w3.org\/1999\/xhtml\u201d>\n<head>\n<title>Test Email Sample<\/title>\n<meta http\u2013equiv=\u201cContent-Type\u201d content=\u201ctext\/html; charset=UTF-8\u201d \/>\n<meta http\u2013equiv=\u201cX-UA-Compatible\u201d content=\u201cIE=edge\u201d \/>\n<meta name=\u201cviewport\u201d content=\u201cwidth=device-width, initial-scale=1.0 \u201c \/>\n<style>\n<!\u2014 CSS code (if any) \u2014>\n<\/style>\n<\/head><\/code><\/pre><\/div><\/div>\n\n\n\n
    The <!DOCTYPE> declaration informs the rendering engine about the HTML version and rules that the HTML and CSS follow. While some email clients (such as Gmail, Google Apps, Yahoo! Mail, and Outlook.com) strip away this code and apply their own, it’s still good practice to include it in your email template HTML code.<\/p>\n\n\n\n
    You can choose between XHTML 1.0 Transitional, XHTML 1.0 Strict, and HTML5, but most experienced email developers prefer XHTML 1.0 Transitional.<\/p>\n\n\n\n
    <meta http-equiv=\u201dContent-Type\u201d \/> specifies how to process text and special characters in your email. The \u201ctext\/html\u201d instructs the rendering engine to consider the following strings of text as HTML.
    <\/p>\n\n\n\n
    <meta name=\u201dviewport\u201d \/> instructs the device, on which the email is viewed, to set the viewable area of the email as per the screen width.
    <\/p>\n\n\n\n
    The title of the email is written between the <title> tag. When a subscriber clicks on \u201cview online\u201d, the title of the email is displayed on the browser tab.<\/p>\n\n\n
    \"Responsive<\/a><\/div><\/div>\n\n\n\n
    Step 2: How To Style Your Email HTML?<\/strong><\/h2>\n\n\n\n
    Any styling you plan to implement in your email, such as text formatting, image sizes<\/a>, and media queries, should be placed between the <style> tags as different classes. The basic format for adding a <style> tag is <style type=”text\/css”>, where “text\/css” specifies the media type as CSS. Placement of the <style> tag can be tricky because 6 out of 36 email clients do not support <style> tags in the <head>, and Gmail does not support them in the email body.<\/p>\n\n\n\n
    Text formatting<\/strong><\/p>\n\n\n\n
    In case you need to add a centralized formatting condition for any text, you can specify the attributes in the specific class of the basic HTML email template. <\/p>\n\n\n\n
    For instance, you can disable text decoration in the following way.<\/p>\n\n\n\n
    <\/div>
    <\/div>
    <\/div><\/div>
    Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div>
    .em_defaultlink a {\ncolor: inherit !important;\ntext\u2013decoration: none !important;\n}<\/code><\/pre><\/div><\/div>\n\n\n\n
    Media Queries<\/strong><\/p>\n\n\n\n
    In case you are coding a responsive email template, the media queries need to be added in the following format.<\/p>\n\n\n\n
    <\/div>
    <\/div>
    <\/div><\/div>
    Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div>
    @media only screen and (min\u2013width: ___px) and (max\u2013width: ___px)\n{\n.(class_name)\n{\n(attributes to be implemented)\n}\n}<\/code><\/pre><\/div><\/div>\n\n\n\n
    For example, consider the following media query in the email HTML code:<\/p>\n\n\n\n
    <\/div>
    <\/div>
    <\/div><\/div>
    Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div>
    @media only screen and (min\u2013width:481px) and (max\u2013width:699px) {\n.em_main_table {\nwidth: 100% !important;\n}\n.em_wrapper {\nwidth: 100% !important;\n}\n.em_hide {\ndisplay: none !important;\n}\n.em_img {\nwidth: 100% !important;\nheight: auto !important;\n}\n.em_h20 {\nheight: 20px !important;\n}\n.em_padd {\npadding: 20px 10px !important;\n}\n}<\/code><\/pre><\/div><\/div>\n\n\n\n
    When the HTML email design is viewed on a device with a screen width between 481 and 699px:<\/p>\n\n\n\n