Site icon Email Uplers

A Step-by-Step Guide to Create Your Own HTML Email

Create Your Own HTML Email

Development of an HTML email is almost like metamorphosis of a tadpole into frog. It undergoes so many changes right from the conceptualization to the final delivery of the HTML email template. Once the email marketer determines the purpose of sending an email, the copywriter drafts the email copy according to the wireframe. Subsequently, the email designer works on the email design according to the wireframe. After the design gets approved, it is assigned to the email developer who transforms the PSD or AI or PDF file into a pixel perfect HTML email. This file is loaded in the ESP and deployed after thorough testing for flawless rendering. Most of the marketers send HTML email rather than a plain text email because of its enhanced aesthetics.

As a number of people are involved in the creation of an email HTML, even a minor change can take too long to ger resolved. In fact, it roughly takes 4-6 hours to develop an email template. The intricacies of the process add to the time taken in developing a single HTML email template.

Through this article, we will show you how to create HTML email template, which you can refer to for basic troubleshooting of your email template HTML code.

P.S: It is always better to rely on experts like Email Uplers to ensure that your subscribers get an awesome and perfectly coded email.
We strongly recommend not to edit an HTML email on Microsoft FrontPage, Word, or Publisher as it will add an additional code to your email template. Use the basic text editor like Notepad or edit the email template HTML code in the code editor of your ESP.

Table of Content:

HTML Basics: How to Create HTML Email Template?

A simple HTML email template includes two parts:

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

Step 1: How to Prepare your HTML <head> template?

The head section of a simple HTML email template resembles the following code:

<!DOCTYPE> is used to inform the rendering engine which HTML tags to expect and which set of rules the HTML and CSS adhere to. Even though some email clients (webmail clients like Gmail, Google Apps, Yahoo! Mail and Outlook.com) strip away the code and apply their own, it is a good practice to include this in your email template HTML code.

Even though you are free to choose between XHTML 1.0, Transitional XHTML 1.0, and Strict HTML5, most email developers worth their salt use Transitional XHTML 1.0.


<meta http-equiv=”Content-Type” /> specifies how to process text and special characters in your email. The “text/html” instructs the rendering engine to consider the following strings of text as HTML.


<meta name=”viewport” /> instructs the device, on which the email is viewed, to set the viewable area of the email as per the screen width.


The title of the email is written between the <title> tag. When a subscriber clicks on “view online”, the title of the email is displayed on the browser tab.

Step 2: How to Style Your Email HTML?

Styling is cool, but its difficult.

Whatever styling you are going to implement in your email such as text formatting, image size, media queries go between the <style> tags as different classes. The basic format for adding <style> tag is <style type=”text/css”> where in “text/css” specifies the media type as CSS. Placement of the <style> tag is tricky as 6 out of 36 email clients do not support <style> tag in <head> and Gmail doesn’t support it in the email body.

Text formatting

In case you need to add a centralized formatting condition (shown below) for any text, you can specify the attributes in the specific class.

e.g. in order to disable text decoration in hyperlinks, add

Media Queries

In case you are coding a responsive email template, the media queries need to be added in the following format.

For example, consider the following media query in the email HTML code:

When the email is viewed in a device that is between the screen width of 481 and 699px:

P.S: !important forces the rendering engine to not make any alterations to the media query.

To create responsive email template, separate media queries are specified to be activated at screen widths lesser than 480px.

The media queries you have learned till now will render in a few mobile layouts. But rendering in some of the layouts require a specific set of media queries, and only an expert developer can help you do that. You can learn more about the challenges and opportunities of responsive email template in this blog.

Interactivity in email
In case you wish to send HTML email with interactive features, the CSS part of the code is to be added before you close the <head> section.

Interactivity is hard to code and requires a lot of testing to render perfectly in email clients. There might be email HTML code available on the internet, but it still requires a lot of coding experience to build interactive emails. You can learn more about interactive emails in our infographic – Interactive Email Design Elements. Here, you will also be able to download samples of each interactive element that can be added in HTML email template code.

Want us to create awesome interactive emails for you? click here now>>

Step 3: What does the Final <head> code look like?

So, our final <head> in the HTML email template code looks like


Is </head> giving you a headache?
We can be your painkiller. Talk to us now.

Step 4: How to build your Email <body>?

The 600px range for HTML email design was calculated for Windows Outlook working on a 1024px desktop monitor, 10 years ago. Now devices with screen widths of minimum 800px are flooding the market; so you can build HTML emails with a width of 700px at least, and add background colors to emulate widescreen emails.

So, we start with a body of 100% width with color #efefefef.

In this we add a table that is center aligned at 700px in the HTML email design.

Now, we will include a pre-header text and “view online” as a part of a cell, made by nesting another table in the above-mentioned table.

Now, we add the hero image.

Now, we add a separate table for the email copy:

Now, we add a CAN-SPAM compatible footer:

Now, before we close the body, we add the following code:

This adds extra spacing to force the desktop layout in Gmail

So, your final email template HTML code should be:

There you go! You’ve successfully created an HTML Email! You can use this HTML Email Example and create your own.

Desktop Version

Mobile View

Wrapping Up

With the help of this step-by-step guide, you can build an HTML email template that can be used for your email marketing strategy. The above methodology is just one of the many processes used to train our developers and test the email templates rigorously using tools like Email on Acid to deliver pixel perfect results as per our clients’ requirements. You can easily use this HTML Email code to create Mailchimp Email Templates, Pardot Email Templates, Marketo, Salesforce Email Templates and many other ESP newsletter templates as well.

Ideally, being an email marketer you need to dabble into various aspects of email, including email design, email coding and template testing. At the same time, most brands and agencies partner with us for their email template production needs to deliver high converting email marketing campaigns.

    Get In Touch

    We shall get back to you within a few hours.

    Exit mobile version