mailmodo-hamburger

How to Create And Send HTML Email & Templates in 2024

Nupur Mittal
ByNupur Mittal

11 mins read

Remember those creative and interactive emails you get in your inbox? Have you ever wondered what those emails are called and how they are developed?

Those are HTML emails, and a lot goes into creating those emails.

If you want to learn the ins and outs of HTML emails, this guide is for you. Here we will talk about coding and designing HTML emails along with best practices you should follow.

What are HTML emails?

HTML emails or HTML mailers are the subset of Hypertext Markup Language used to create websites. Using HTML, you can add formatting and semantic markup in the emails.

These emails are often created using Cascading Style Sheets (CSS), which reflects how the email elements will be displayed. Thus, HTML provides the structure or outline of your email, while CSS adds life to it by displaying colors, images, etc. They are a prominent part of web design but also emails.

But, before we talk about how to code an HTML mailer, let’s understand the role of CSS.

HTML email marketing

HTML email marketing utilizes HTML (Hypertext Markup Language) formatting in promotional or informational emails. It enables marketers to create visually appealing campaigns with images, colors, fonts, and clickable links. HTML's flexibility allows for dynamic content like personalized greetings and product recommendations, providing a tailored and interactive experience. However, marketers should avoid rendering inconsistencies across email clients and devices, necessitating responsiveness optimization, adherence to best practices, and compatibility testing. HTML email marketing effectively engages recipients, conveys messages effectively, and drives higher conversions.

HTML email marketing uses HTML formatting in emails to create visually appealing campaigns. Marketers can incorporate design elements and dynamic content, such as personalized greetings and product recommendations. However, rendering inconsistencies across email clients and devices requires optimization, adherence to best practices, and compatibility testing. HTML email marketing is effective in engaging recipients and achieving higher conversions.

HTML Email Languages And Frameworks

HTML email languages and frameworks are tools and resources designed to facilitate the development of effective and visually appealing emails. They offer solutions for coding clean, responsive emails that work well across different email clients.

HTML email languages, such as HEML and MJML, provide markup languages specifically tailored for email development. They simplify the process by eliminating the need to handle email-specific quirks and styling paradigms. With these languages, developers who are already familiar with HTML and CSS can quickly start creating professional-looking emails.

HTML email frameworks, such as Maizzle and Foundation for Emails, go a step further by providing a structured framework and additional features. These frameworks often integrate with popular CSS frameworks like Tailwind CSS, offering ready-made projects, templates, and reusable components that save time and effort. They also address responsive design challenges, ensuring that emails are optimized for different devices and email clients.

What is the role of CSS in HTML emails?

CSS, or Cascading style sheets, acts as a design blueprint in your HTML code. It describes how HTML elements, such as the color, headers, tables, images, etc., will line up and display in the email.

There are three ways you can add CSS in HTML. They are as follows:

1. External stylesheets

An external style sheet is a separate CSS file you can access by creating a link within the head section of your HTML. An external stylesheet may look like this:

<head>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

The code above, "style.css" is a plain text file separated from your HTML code. The style is the file's name and can differ for different users.

Most email clients don’t support external stylesheets. Hence, it is a best practice not to use them.

2. Embedded stylesheets

As the name suggests, these sheets are embedded in the HTML using the <style> element. The support for this sheet is also minimal across email clients.

For example, as per Litmus data, email clients such as Mail.ru, Android 5.1, Android 6.0, Gmail App IMAP (Android), and Windows 10 Mail don’t display these sheets in an HTML mailer.

3. Inline stylesheets

Inline CSS is generally the safest way to ensure rendering compatibility across various email clients, programs, and devices.

With inline styles, code is applied directly to HTML elements in each line of the HTML. A CSS inline sheet may look like this:

<span style="font-size: 24px; font-family: Arial, sans-serif; color: #222222;">Hello!</span>

How to code HTML emails

This is the part where you begin to create emails. So, let’s get started.

1. Select a doctype

A doctype is a document-type declaration (DTD). These declarations tell an email client what version of HTML you are using so that it can properly render your email to the viewer.

Choosing a doctype is the foremost step to creating an HTML email, as, without it, there is no guarantee that email clients will display your email how you intended.

Now, you need to decide which doctype to use for emails as there are many of them, such as HTML5, HTML4.01 strict, HTML 4.01 Transitional, etc.

HTML5 is the most recent and was designed to hold multiple code forms, but as it is still evolving, the support for HTML5 is limited across email clients. For that reason, you should avoid using HTML5.

Scalero recommends XHTML 1.0 Transitional and HTML 4.01 Transitional doctype declarations:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

You can choose the correct doctype for your emails from the recommended list of doctype by W3C.

2. Vector markup language and DPI scaling

After picking a doctype, you must add Vector Markup Language (VML) support. It is useful for ensuring that unsupported features, like background images and rounded borders, display correctly on email clients like Outlook 2007-16 and Outlook Express. The code looks like this:

<htmlxmlns:v="urn:schemas-microsoft-com:vml"xmlns:o="urn:schemas-microsoft-com:office:office">

Dots per inch, or DPI, is a measure for screen resolutions. DP scaling can also be a pain with Outlook email clients, so we suggest adding the following code inside the <head> tag:

<head> tag:

<!--[if gte mso 9]>

<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>

<![endif]-->

3. Coding the email header

It’s time to create the email header. Head elements contain the information that your subscribers can’t see but are necessary for machine processing by email clients. The information is put under meta tags within a tag.

** Meta tags**

The <meta> The HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.

There are many meta tags you can add in HTML, but the following are the most useful in maintaining control over how basic aspects of your email display:

<meta name="format-detection" content="date=no">

<meta name="format-detection" content="telephone=no">

These meta tags will tell iOS devices not to turn addresses or phone numbers in their emails into links. You might want these elements to display as clickable links, but Apple’s default blue may not go with your email color scheme.

So, these meta tags will prevent such happenings and allow you to modify your links as per your preference.

<meta content="width=device-width, initial-scale=1" name="viewport" />

This tag guides email clients on how to scale the email, precisely its width. This will help maintain the position of email content to avoid any blank space next to images or text that doesn’t wrap properly.

After meta tags, add a CSS style tag to indicate that the content in your email is, in fact, CSS:

<style type="text/CSS">

4. Create email body and tables

Now, you can create the overall structure of your emails. Within the email body, add a tag for the main container with a width of 100%, as this table holds most of the email content. You should follow these guidelines while creating tables:

  • Add padding:0px; margin:0px to the body tag to remove extra space in the email.
  • Add "role= presentation” attribute to each of your tables to help email clients know that the table is only for visual purposes, not as a data table.
  • In the main table, create rows (tr) and columns (td). Within each column, create a table with a width of 600px. You can then define the content in the table.

5. HTML email formatting

Just like formatting paragraphs in Books, Documents, and Websites. It's important to format HTML email codes to avoid any issues in the future. Also, make sure to format the email in a professional way.

How to design HTML emails

While creating an HTML email, the design matters as much as its coding. A compelling, engaging, and responsive email design can offer a better user experience. While designing an HTML email, you should consider many elements such as buttons, typography, layout, and multimedia elements like -videos, GIFs, etc.

Each of these elements can significantly impact how your email looks and is understood by the reader. So, paying attention to them is crucial. There are different ways of making sure your HTML email design is good to go.

Create beautiful HTML emails without coding in minutes

cta-img

How to make HTML emails accessbile

When you are creating HTML emails, you must ensure email accessibility. It means every user should be able to access and read your emails regardless of their state. These states can be either human disabilities or technical, such as limited email client support.

For instance, colorblind people might not perceive specific colors in your emails. You must also add alt text in your images in order to make them accessible to all. On the technical side, Outlook (web) doesn’t support AMP emails, but the Gmail Android app does.

Responsive HTML email template examples

Ready to see some amazing and creative HTML email templates? We've 300+ responsive HTML & AMP free templates, which you can customize for various devices and send in a few clicks.

1. HTML welcome email template

Send them this zig-zag layout welcome email to create a lasting impression on your new signups. The banner image attracts attention, and product visuals showcase the products. The welcome coupon code is the highlight of the email. Here's a free HTML email template for you to use:

Checkout our collection of welcome email templates

If you're looking for a wide range of responsive HTML email templates, There are several collection email template categories like HTML Emails, E-commerce email templates, HubSpot Email Templates, Thank you Email Templates, and more. These templates are designed to adapt to various screen sizes and email clients, ensuring your emails look great on desktop and mobile devices.

💡 Browse 300+ : Email Templates to start your email marketing journey.

HTML email coding best practices

Coding emails may seem complex and confusing since email rendering has many possibilities. To ensure that your email renders well, you can follow these best practices:

• Avoid JavaScript or Flash

These technologies are largely unsupported by email clients so that emails won’t render properly.

However, if you want to use Javascript and other interactive elements in your emails, consider using Accelerated Mobile Pages (AMP) for email, but this format has limited client support.

Only Gmail, Yahoo!, and Mail.ru support AMP components in email.

• Keep HTML file size below 102KB

Each line of code in an HTML doc file affects the load timing of the email. This is why keeping your code organized and economical is essential to avoid redundant lines just taking up space.

Also, keep your HTML file size below 102KB, as Gmail will clip file sizes greater than 102 KB. Besides, a file size of 100KB passes through more spam filters.

• Avoid mal-functional HTML tags

It is a good idea to avoid using mal-functional HTML tags. If there are any broken tags in your HTML code, the email client can mark it as spam or, worse, won’t render it correctly. That’ll hurt the email deliverability of the current and future email campaigns.

• Avoid extra spacing around images

Avoid extra spacing around an image. Instead, use display: block to remove this different spacing.

• Avoid odd numbers for sizing

Try not to use odd numbers for sizing, such as 11px, 13px, etc., as email clients sometimes add a 1px line between email elements. Such a problem is most prevalent in Outlook 2016, and your email may look like this: Unwanted lines appear in Outlook 2016 with odd font sizes.

Random lines appearing in Outlook 2016 due to using odd numbers as font size Source: Email on Acid

• Remove comments in your CSS

Make sure to remove any comments in your CSS in your HTML code’s tag in your code editor. These may ruin your code in some email clients, such as Outlook. So, it’s a best practice to eliminate them if they’re unnecessary.

• Always test your emails before sending them

The best way to know whether your code works is to test your emails. So before you send them to your final recipients, test your emails at every stage of their development.

By testing, you can spot any disparities in your emails. Hence, it will help you craft a consistent viewing experience for all your subscribers.

One step up from HTML emails: Welcome AMP emails

There is a new buzzword among email marketers-. So, what is it? AMP for emails is a set of HTML tags supported by JavaScript that enables functionality with an added focus on performance and security.

Moreover, AMP emails are more compatible with introducing a new Multipurpose Internet Mail Extensions (MIME) part. The MIME part allows emails to fall back to HTML templates if a provider or client doesn’t support AMP emails.

AMP for emails is still nascent, but it will revolutionize email marketing. If you want to try out AMP emails, then Mailmodo is your answer. Mailmodo offers 20+ interactive AMP widgets, such as forms, surveys, polls, carts, and calendars, that you can embed within the email and increase your conversions. You also get to see analytics so that you can track the overall performance of your emails.

FAQs

To send an HTML email, you can create a special kind of email using a coding language called HTML. This helps you make the email look fancy with colors, images, and different styles. Then, you can use an email service or program to send an email like Mailmodo to the people you want to reach.

To create an HTML email in Gmail, first, open your Gmail account. Click on "Compose" to start a new email. Then, click on the three dots in the email toolbar and choose "HTML." Now you can write your email using HTML code to add colors, images, and styles. When you're done, click on "Send" to send your fancy HTML email to someone.

To add an email link in HTML, you can use the "mailto" attribute. Simply insert the following code in your HTML document: Click here to send an email. Replace "youremail@example.com" with your own email address. When users click on the link, it will open their default email client with a new email address to the specified email address.

To create an HTML email signature, design your signature using HTML code. Include your name, contact information, and design elements like a logo. Open your email client settings, find the option to edit the signature, and paste your HTML code. Save the changes, and your customized HTML email signature will be added to your outgoing emails, giving them a professional touch.

Share this article
copy link
like/dislike
Linkedin logo
Twitter logo
Facebook logo
Whatsapp logo
Pinterest logo
mail logo

What should you do next?

Thanks for reading till the end. Here are 3 ways we can help you grow your business:

2_e7e11ef835
Get smarter with our email resources

Explore our email marketing guides, ebooks and other resources to master email marketing.

1_6f8cd1f355
Do better email marketing with Mailmodo

Send app-like interactive emails with forms, carts, calendars, games, etc. to boost email ROI.

3_44e5481591
Talk to an email expert

Get a 30-min. free email consultation with a Mailmodo expert to optimize your email marketing.

Get better ROI
on every email
you send

Quotation markMailmodo is a growth
hack for my business”

Vineet Khare, Bella Vita Organic

Get 3X conversions
with interactive emails

Check.svg

Create & send interactive emails without coding

Check.svg

Put revenue on auto-pilot with pre-built journeys

Check.svg

Save time with AI-powered email content creation

1000+ businesses grew with Mailmodo, including

Frame_1110165681_3_b26b1a7573
Group_1110165532_1_bf39ce18b3
Ellipse_Gradientbottom_Bg
Ellipse_Gradientbottom_Top
gradient_Right