Title and Meta

What is it?

The template begins by setting out some declarations through the Doctype and meta tag in order to prevent a few issues from the get go. There is no need to edit any of these other than the title tag. We also insert some code that only Microsoft Office executes.

Boilerplate line 1-24

<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <head>
        <!--[if gte mso 9]>
        <xml>
            <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
        </xml>
        
        
        <!--[if gte mso 9]>
            <style>
                li{text-align:-webkit-match-parent; display:list-item;text-indent: -1em;Margin: 10px 0 10px 15px !important;}
            </style>
        <![endif]-->
        
	    <!-- Meta 1 --><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!-- Meta 2 --><meta name="x-apple-disable-message-reformatting">
        <!-- Meta 3 --><meta name="viewport" content="width=device-width">
        <!-- Meta 4 --><meta http-equiv="X-UA-Compatible" content="IE=edge">
        
    	<title>Email Template</title>
                    

Now lets break this code down so you know what each line does:

!DOCTYPE

We use the XHTML 1.0 Transitional doctype to ensure any depreciated tags are marked as valid code. Much of the code written in HTML emails makes use of older, depreciated HTML elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML

The opening HTML tag includes two important XML namespaces. These define properties for use with Microsoft Office applications like Outlook. These are required so Outlook understands the next piece of code we add.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

Outlook Conditionals

Now we define two Outlook conditionals. These are important to put right a couple of problems only found in Outlook. This first is a DPI scaling issue. Depending on the users settings, images in Outlook can appear zoomed in. We correct this by forcing the DPI to 96.

The next conditional fixes some spacing issues in list items. There is no need to edit either of these conditional fixes.


        <!--[if gte mso 9]>
        <xml>
            <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
        </xml>
        
        
        <!--[if gte mso 9]>
            <style>
                li{text-align:-webkit-match-parent; display:list-item;text-indent: -1em;Margin: 10px 0 10px 15px !important;}
            </style>
        <![endif]-->

Meta 1

Preserves your character encoding format across various email clients.

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

Meta 2

Prevents iOS 11+ from automatically scaling emails.

<meta name="x-apple-disable-message-reformatting">

Meta 3

Control the size at which browsers show your email.

<meta name="viewport" content="width=device-width">

Meta 4

Enables responsive formatting across Windows phones.

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

Title

Title your email here for when users view the email in a web browser, if the option is available from your ESP.

<title>Email Template</title>