Email Boilerplate – Email Code Camp

When it comes to email marketing, the foundation of your success lies in the structure of your email template. A well-coded, responsive boilerplate ensures your emails look great across all devices and email clients, while also improving accessibility and deliverability. Below is a clean, stripped-back boilerplate template that can serve as the starting point for all your email builds. Whether you’re a seasoned developer or just starting out, this boilerplate is designed to be simple, flexible, and future-proof.

The Base Boilerplate Code

<!DOCTYPE html>
<!-- Change the lang and dir attributes to match the language of your email and the direction of that language. -->
<html lang="en" dir="ltr" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<!-- [Email Code Camp Template Version 02.12.2025] -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no, date=no, email=no">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="color-scheme" content="light dark">
    <meta name="supported-color-schemes" content="light dark">

    <!-- Browser Tab Name -->
    <title>Email Title</title>

    <!--[if gte mso 9]><xml>
        <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml><![endif]-->

    <style>
        :root {
          color-scheme: light dark;
          supported-color-schemes: light dark;
        }
    </style>

    <!-- Desktop-specific Classes -->
    <style>
        body {
          margin: 0;
          padding: 0;
          word-spacing: normal;
        }
        h1 {
          margin: 0.67em 0;
          font-size: 2em;
        }

        #root [x-apple-data-detectors=true],
        a[x-apple-data-detectors=true] {
          color: inherit !important;
          text-decoration: inherit !important;
        }
        a:hover {
          text-decoration: none;
        }
    </style>
</head>

<!-- START: Body -->
<body id="body" style="width: 100%; padding: 0px; margin: 0px auto;">

    <!--- Accessible Article (Adjust lang, dir, and aria-label attributes to match your email's language, text direction, and title.) --->   
    <div role="article" aria-roledescription="email" aria-label="Email Title" lang="en" dir="auto" style="font-size: 1rem;">

    <!--------------- START: Email content --------------->
    
            <!-- Your email content goes here -->
            
    <!--------------- END: Email content --------------->
    </div>
    <!-- END: Accessible Article -->

</body>
<!-- END: Body -->
</html>

Why This Boilerplate Works

This boilerplate is designed to be lightweight, responsive, and accessible, while ensuring compatibility across major email clients. Here’s a breakdown of the key components and why they matter:

1. Doctype

<!DOCTYPE html>

The doctype should be the very first line of any HTML document. This declares the document as HTML5, which is the latest version of HTML and is widely supported by modern browsers.

2. HTML Element

<!-- Change the lang and dir attributes to match the language of your email and the direction of that language. -->
<html lang="en" dir="ltr" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

lang="en": Sets the default language of the email (e.g., English). This is crucial for accessibility, as screen readers and email clients use this to interpret content.
dir="ltr": Defines the text direction as left-to-right.
For right-to-left languages like Arabic, use dir="rtl".

3. Meta Tags

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no, date=no, email=no">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="color-scheme" content="light dark">
    <meta name="supported-color-schemes" content="light dark">

<meta charset="utf-8">: Ensures proper character encoding, supporting a wide range of languages and symbols.
<meta name="viewport" content="width=device-width, initial-scale=1">: Makes the email responsive by setting the width to the device’s screen width.
<meta name="format-detection" content="telephone=no, date=no, email=no">: Prevents email clients from auto-linking phone numbers, dates, or addresses.
<meta name="x-apple-disable-message-reformatting">: Stops Apple Mail from auto-scaling emails, ensuring your responsive design works as intended.
<meta name="color-scheme" content="light dark">: Supports light and dark modes, ensuring your email looks great in both.

4. Title Tags

    <!-- Browser Tab Name -->
    <title>Email Title</title>

While not visible in most email clients, the title tag is important for emails opened in browsers. It also helps with accessibility and can appear in some email client previews.

5. XML for Outlook


    <!--[if gte mso 9]><xml>
        <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml><![endif]-->

This conditional comment ensures that Windows versions of Outlook render the email correctly, especially on high-DPI screens. The PixelsPerInch setting improves rendering quality.

6. Body and Wrapping Element

<!-- START: Body -->
<body id="body" style="width: 100%; padding: 0px; margin: 0px auto;">

    <!--- Accessible Article (Adjust lang, dir, and aria-label attributes to match your email's language, text direction, and title.) --->   
    <div role="article" aria-roledescription="email" aria-label="Email Title" lang="en" dir="auto" style="font-size: 1rem;">

<body id="body">: The body ID defines the <body> element of the email. While a class can also be used, IDs are for single-use elements, whereas classes are reusable.
<div role="article" aria-roledescription="email">: This wrapping element improves accessibility by defining the email as a standalone piece of content. The aria-label provides a descriptive name for screen readers.
font-size: 1rem: Ensures the font size is accessible and respects user settings, especially in Apple Mail, which defaults to 12px.

Customization Tips

Language and Direction: Update the lang and dir attributes to match your audience’s language and text direction.
Title and Aria-Label: Use the email’s subject line or a descriptive name for the title and aria-label.
Content: Replace the placeholder comment  with your email’s HTML content.

Final Thoughts

A solid email boilerplate is the foundation of every successful campaign. This base template is designed to be simple, yet powerful, ensuring your emails look great and perform well across all platforms. Whether you’re sending a newsletter, a promotional offer, or a transactional email, this boilerplate has you covered.

Pro Tip: Always test your emails using tools like Litmus or Email on Acid to ensure compatibility across email clients. And don’t forget to A/B test your subject lines and content for maximum engagement!

P.S. If you found this boilerplate helpful, feel free to share it with your team or bookmark it for future use. Happy emailing!

The Base Boilerplate Code

Why This Boilerplate Works

Customization Tips

Final Thoughts

Useful Links

Contact