Build the Email Template Using HTML

The email template relies on traditional HTML techniques. You’ll be working with tables and stacking table rowsand table datathe entire time. The basic HTML email template looks like this:

Output:

It would be best to prepare a design so that you could map out where and how you are going to slice up the design. Additionally, you’ll be mentally prepared to draft a table structure out of it.

Here, you’re starting with the DOCTYPE for the document. Next up, you set the charset, content type, meta tags, and title inside thetag. The essential part begins with thetag where you place a parent

and add multiple table rowsinside it. After dividing the content into a proper number of rows, it’s time to enter the table data
inside them.

As said, you’ve to work merely with tables. Therefore, for entering different data inside the

tag, you need to follow a defined route. For instance, let’s form an email template with a logo and date inside atag.

Now you know how to place HTML tags and build a good structure for your email template. Let’s move forward to better understand email styling.

Style Your HTML Email

Styling an HTML email is a cumbersome task since you can only use inline CSS. Also, you’ll need to iterate the styling for every element if it possesses similar styling. If you’re not familiar with Cascading Style Sheets, explore getting started with CSS.

Preview:

Output:

If you’d like, you can access the complete code on GitHub and clone the repository to use it.

Sending the Mail

Now copy-paste the entire code from GitHub. If you’re using VS Code, open the HTML file using the live server extension and copy the content by clicking on Ctrl + A > Ctrl + C. Open Gmail and compose a new email. Paste the content and enter the receiver’s mail id. Send the email and you’ll get the results as shown below:

Test the code on different devices to see how it looks and behaves. Customize your HTML email and make it clean, simple, and responsive.

Modify Existing Email Templates

Creating an HTML email from scratch demands a solid grip on HTML and inline CSS. You could also modify an existing email template and customize it according to your needs. Keep in mind that HTML emails tend to take a few seconds to load up. Plan, design, code, and conduct thorough testing to avoid any end-user inconsistencies. You can learn more about semantic HTML and CSS to write better, more accessible code.