What Metadata should be in the Head of your HTML Email Document?

Now that we have the HTML Email Doctype sorted in the last lesson, let’s see what information we should include in the head of the document with metadata tags. While the doctype used in email would be considered dated for the web, HTML Email Metadata tags are similar to those used in the latest web development practices, with the exception of the tags not being shortened.

First we’ll declare the character set of the HTML document which is “UTF 8” or the standard character set for numbers and letters on the internet. The latest version of the meta tag for the web would simply be  but we’ll use the version to include the content type value and attribute for HTML email as follows:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Now we’ll add a compatibility meta tag to ensure proper rendering on Internet Explorer and Edge web browsers for when the email design is being displayed on the web as a webpage if the option is presented:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Next we’ll include the viewport meta tag to control the layout on mobile browsers and to make it so the scale is set to 1 when the template is displayed on mobile so the zoom is set to 1 or 100% when seen on mobile:

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

The last set of meta tags included in the head of the document is for dark mode which lets dark mode compatible email clients and web browsers know that it can choose from the light or dark version of the template based on the user’s preference. Dark mode is covered in more detail in the Dark Mode in HTML Email lesson.

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

If you plan to have your HTML Email Template display on the web, it’s a good idea to include a title tag for the user to see and for the page to be bookmarked in a users browser.

<title>HTML Email Template Project</title>

..continue to the next lesson: Dark Mode in HTML Email.