DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Coding an HTML Email Template From Scratch.
Helitha Rupasinghe
Helitha Rupasinghe

Posted on • Updated on

Coding an HTML Email Template From Scratch.

Today, we’re going to build a simple HTML email template from scratch.

Getting Started

Here’s the HTML email we’ll be building, feel free to fork the pen and use it yourself.

You need to start your HTML email template with an HTML doctype, and remember to set our language to English with <html lang="en">. Also include XML and Microsoft Office namespaces (the xmlns bits).

<!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:o="urn:schemas-microsoft-com:office:office">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta name="x-apple-disable-message-reformatting">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="telephone=no" name="format-detection">
  <title></title>
  <!--[if (mso 16)]>
    <style type="text/css">
    a {text-decoration: none;}
    </style>
    <![endif]-->
  <!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
  <!--[if gte mso 9]>
<xml>
    <o:OfficeDocumentSettings>
    <o:AllowPNG></o:AllowPNG>
    <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
</xml>
<![endif]-->
  <!--[if !mso]><!-- -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
  <!--<![endif]-->
</head>
Enter fullscreen mode Exit fullscreen mode

There are quite a lot of things happening in the code above, but it's the bare minimum you'll need to ensure your final email renders beautifully everywhere.

Note πŸ’‘- You'll see some code between <!--[if mso]> and <![endif]-->. Placing code inside those two tags means that only Microsoft Outlook on Windows will apply it (mso = 'Microsoft Outlook'). The xlmns settings that we put in the html tag ensures this code gets interpreted properly.

Creating the body and header area

Now we add the following structure to our email, starting directly underneath the </head> tag:

<body data-new-gr-c-s-loaded="14.1070.0">
    <table role="presentation" class="es-wrapper" width="100%" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td class="esd-email-paddings" valign="top">
            <table role="presentation" class="es-content esd-header-popover" cellspacing="0" cellpadding="0" align="center">
              <tbody>
                <tr>
                  <td class="esd-stripe" align="center">
                    <table role="presentation" class="es-content-body" width="600" cellspacing="0" cellpadding="0" align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
                      <tbody>
                        <tr>
                          <td class="es-p20t es-p20r es-p20l esd-structure" align="left">
                            <table role="presentation" width="100%" cellspacing="0" cellpadding="0">
                              <tbody>
                                <tr>
                                  <td class="esd-container-frame" width="560" valign="top" align="center">
                                    <table role="presentation" width="100%" cellspacing="0" cellpadding="0">
                                      <tbody>
                                        <tr>
                                          <td align="left" class="esd-block-text">
                                            <h1 style="color: #565a5c; font-family: 'open sans', 'helvetica neue', helvetica, arial, sans-serif; font-size: 18px;">Hi&nbsp;Jane Doe!</h1>
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
Enter fullscreen mode Exit fullscreen mode

All our tables will be set to role="presentation". This makes them more accessible as it informs the screen reader to treat it as a visual table and not as a data table.

We’ve also added a table with a width of 100%. This acts as a true body tag for our email, because the body tag is sometimes removed by email clients. Apply any 'body' background colour that you want to this table tag.

You'll notice we have set cellpadding="0"; and cellspacing="0" to zero to avoid any unexpected space in our table.

Check the browser again and you should now see this:

header.png

Creating the Content area

Moving on from the header, We can simply add the following after the </tr> above:

  <tr>
                          <td class="esd-structure es-p20t es-p20r es-p20l" align="left">
                            <table cellpadding="0" cellspacing="0" width="100%">
                              <tbody>
                                <tr>
                                  <td width="560" class="esd-container-frame" align="center" valign="top">
                                    <table cellpadding="0" cellspacing="0" width="100%">
                                      <tbody>
                                        <tr>
                                          <td align="left" class="esd-block-text">
                                            <p style="color: #565a5c;">You updated your&nbsp;email&nbsp;address to&nbsp;<a href="mailto:jdoe@gmail.com" target="_blank">jdoe@gmail.com</a>.&nbsp;Confirm&nbsp;your&nbsp;email&nbsp;address to continue capturing and sharing your moments with the world.</p>
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
Enter fullscreen mode Exit fullscreen mode

You should now see this:

content.png

Creating the CTA button

Similarly, add the following after the </tr> above:

                      <tr>
                          <td class="esd-structure es-p20t es-p20r es-p20l" align="left">
                            <table cellpadding="0" cellspacing="0" width="100%">
                              <tbody>
                                <tr>
                                  <td width="560" class="esd-container-frame" align="center" valign="top">
                                    <table cellpadding="0" cellspacing="0" width="100%">
                                      <tbody>
                                        <tr>
                                          <td align="left" class="esd-block-button es-p10b"><span class="es-button-border" style="border-color: #47a2ea; border-radius: 0px; border-bottom-width: 0px; background: #47a2ea;"><a href class="es-button es-button-1658907464943" target="_blank" style="background: #47a2ea; border-color: #47a2ea; font-family: &quot;open sans&quot;, &quot;helvetica neue&quot;, helvetica, arial, sans-serif; border-radius: 0px; border-width: 10px 20px;">Confirm Email Address</a></span>
                                            <esd-config-block value="{&quot;configClass&quot;:&quot;es-button-1658907464943&quot;,&quot;rule&quot;:&quot;[data-ogsb] .es-button.es-button-1658907464943&quot;,&quot;properties&quot;:{&quot;padding&quot;:&quot;10px 20px !important&quot;}}" name="btnIndentSettingsControl" style="display: none;"></esd-config-block>
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
Enter fullscreen mode Exit fullscreen mode

You should now see this:

cta.png

Creating the Footer Area

Finally we’ll create our footer table after the previous closing </tr> tag.

    <table cellpadding="0" cellspacing="0" class="es-content esd-footer-popover" align="center">
              <tbody>
                <tr>
                  <td class="esd-stripe" align="center">
                    <table class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="background-color: transparent;">
                      <tbody>
                        <tr>
                          <td class="es-p20t es-p20r es-p20l esd-structure" align="left">
                            <table cellpadding="0" cellspacing="0" width="100%">
                              <tbody>
                                <tr>
                                  <td width="560" class="esd-container-frame" align="center" valign="top">
                                    <table cellpadding="0" cellspacing="0" width="100%">
                                      <tbody>
                                        <tr>
                                          <td align="center" class="esd-block-text">
                                            <p style="color: #565a5c;">Company Β© 2022 Company,&nbsp;Inc. All Rights Reserved.<br>1601 Willow Road, Menlo Park, CA 94025</p>
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                        <tr>
                          <td class="esd-structure es-p20t es-p20r es-p20l" align="left">
                            <table cellpadding="0" cellspacing="0" width="100%">
                              <tbody>
                                <tr>
                                  <td width="560" class="esd-container-frame" align="center" valign="top">
                                    <table cellpadding="0" cellspacing="0" width="100%">
                                      <tbody>
                                        <tr>
                                          <td align="center" class="esd-block-text">
                                            <p>Don't like these emails?&nbsp;<a href="https://cdpn.io/javascriptdon/fullpage/qBoXwqy#">Unsubscribe.</a></p>
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

You should now see this:

footer.png

Recap

If you followed along then you should have completed the tutorial and finished off your responsive HTML Email template.

Try this Instagram template I made for free.

Top comments (0)

πŸ”  Find your favorite font

Β 
You can change your default font in Settings.