In this article, we will cover the basics of emailing HTML code, how to create a HTML email template, and the changes needed to send the HTML and plain text email to users’ inboxes.
Initial HTML email template setup
As you may have guessed, HTML email templates are formatted in HTML code and can contain all of the basic HTML elements like <!DOCTYPE html>, <html>, <body>, <style> and so on.
But you should think of the template as a completely independent page on your website. It should not include or extend any other templates.
<!DOCTYPE>
First, we need to add a document type to the top of the document so the browser can render the HTML elements correctly.
Some email clients like Yahoo, Gmail, and Outlook strip away the doctype, but it is still a good idea to format your email template with the basic HTML elements so it can adequately cover the clients that don’t strip code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
As you may have noticed, we are using the XHTML 1.0 Transitional that contains all of the HTML documents and attributes. The main difference between XHTML and regular HTML5 is that the former requires you to code <html>, <head>, and <body> tags while the latter can work without them.
You could opt to use the regular <!DOCTYPE html> or HTML5 document type, but XHTML is better suited to interpret poor HTML coding, like missing closing tags, on smaller devices.
But generally speaking, there are only subtle differences between the document types and both work fine for email templates.
element
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
</html>
The next thing to add is the <html> element. If your are using XHTML, you will need to specify the xmlns. However it is optional when using HTML5.
element
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML email template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>
Then you can go ahead and add the <head> element and have the necessary meta tags that provide the character set and the viewport metadata.
Coding the HTML email template
Now let’s move on to the body of the HTML email template. Most HTML templates use the <table> element rather than <div> to separate content.
Why?
Compatibility.
Web clients like Chrome and Safari use different web-based engines that display emails differently depending on the browser’s engine. In particular, Microsoft Outlook has extreme difficulty rendering division elements. But if you really want to use division elements you can use ghost tables.
Tables in the element
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML email template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<table>
<tr>
<td align="center">
<!--Your email code goes here-->
</td>
</tr>
</table>
</body>
</html>
Now add a <body> element with a table element nested within it. Then you can add the table rows, <tr>, and table data or cells, <td>. You can chose to add as many table rows and cells as you need for your email.
Ghost tables in the element
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML email template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--[if true]>
<table>
<tr>
<td align="center">
<![endif]-->
<div>
<!--Your email code goes here-->
</div>
<!--[if true]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>
If you really don’t want to use tables, you can always add ghost tables to your <div> elements. Ghost tables are essentially only created for Microsoft Outlook compatibility, given that other web clients don’t seem to have as much issue with division elements.
To use ghost tables, all you need to do is wrap the <table>, <tr>, and <td> opening and closing tags in the comment <!--[if true]> <![endif]-->. Then you can code with division elements as if the ghost tables weren’t even there.
Add a preview text to the element
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML email template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="preheader" style="display: none; max-height: 0; overflow: hidden;">
This is where you add the preview text for the email...
</div>
<table>
<tr>
<td align="center">
<!--Your email code goes here-->
</td>
</tr>
</table>
</body>
</html>
If you look at your email inbox you’ve probably noticed that every email has a Subject line and then a little bit of preview text from the email. Well, this text can be customized to display any text of your choosing.
To add your own preview text, you can create a custom class named preheader that is then hidden within the <body> element. That way, the email client is able to read in this information and display it as the preview text, but keep it from appearing in the actual template.
#python #web-development #django #password-reset #html
