How to send HTML email

There are cases where plain text emails are not enough. This is when HTML letters come into play. Snov.io supports HTML coding in emails, and you may easily send an HTML page or newsletter as an email with little effort. Learn how to send your HTML email in Snov.io.

Outline:

  1. Create an HTML-based email
  2. Copy and paste your HTML-based email 

Step 1. Create an HTML-based email 

Before inserting an HTML template into your email, it would be good to create it first. Creating HTML letters can be a tedious task. If you like challenges or want a creative email that is totally different from the others, then designing yours can be fun and beneficial.

Otherwise, you can find ready-made HTML email templates. Considering how tricky HTML letters can be, this is probably the easiest way. Luckily, there are many HTML email templates available on the Internet, here are just a few:

To create an HTML email, one should know that any HTML template consists of a head and body. 

Head

In the head section, we indicate meta tags and a title. All the media queries, styling, and CSS animations are mentioned here. It is located within <head> and </head>.

The head section of any email looks like the following code:

html email

  1. <!DOCTYPE> is used to notify the rendering engine which HTML tags to expect and what set of rules HTML and CSS should abide by. Even though some email clients, such as Gmail, Outlook, or Yahoo! Mail, remove the code and apply their own, it is recommended that you add this to your email template HTML code.
  2. <meta http-equiv=”Content-Type” /> is used to notify how to process the text and special characters in your letter. 
  3. “text/html” is used to inform the rendering engine to recognize the following strings of text as HTML.
  4.  <title></title> is the email’s title. Recipients will see it on the browser tab when they open a letter. 
  5. <meta name = ”viewport” /> is used for making a responsive HTML email. It informs the device on which the message is viewed to set the correct scaling.

Body

The body section is the main email section that contains everything that will be visible when the recipient opens the email. It is located between <body> and </body> tags and starts with formatting.

To display the email structure in all email clients as it was produced, it is suggested that you format it using nesting tables.

Create at least two tables: email template container and email content table.

Email template container is the core table. Set its width to 100%. This way, you will cover an email space. It is also recommended to set the margin, padding, cell padding, and cell spacing to zero. This will eliminate unexpected space inside this table.

Email content table is placed inside the core one. Set its width up to 700 pixels. This is a standard well supported by the majority of email clients. Align this table to the center. 

This is how it looks:

html email

Next, depending on the selected template, you can add text, images, buttons (CTAs), as well as change colors. Place each text block or element to a separate cell and apply inline styling. 

Here’s a simple structure of the content block and a button added as a separate table:

html email

Finish your HTML code with a footer. It’s the closing part of an email. It is essential to add the sender’s information and attach an unsubscribe link here. You may also mention links to your social profiles or some additional information.

html email

Here you go! You have successfully created an HTML email! Now you can easily use it in your email drip campaign.

Step 2: Copy and paste your HTML-based email 

In your Snov.io account, start an Email Drip Campaign and navigate to the Email element.

html email

Select the Source code icon and paste the code of your pre-made HTML template into an email.

html email

Then click Ok.

html email

We recommend you send a test email by clicking the Send a test email button to make sure your HTML-based email will be sent as expected. 

html email

Check the test email on mobile and laptop; use at least two different browsers and email clients.

Learn about the limitations of HTML email design.

If you have any questions, please reach out to us and we will gladly help you!

Was this helpful?

Thanks for your feedback!

Sorry about that 😢

How can we improve it?