<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Making Accessible Emails</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css">
        /* CLIENT-SPECIFIC STYLES */
        body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
        table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
        img { -ms-interpolation-mode: bicubic; }

        /* RESET STYLES */
        img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
        table { border-collapse: collapse !important; }
        body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
    </style>
  </head>
  <body style="background-color: aliceblue; margin: 0 !important; padding: 60px 0 60px 0 !important;">
    <table border="0" cellspacing="0" cellpadding="0" role="presentation" width="100%">
      <tr>
          <td bgcolor="aliceblue" style="font-size: 0;">&​nbsp;</td>
          <td bgcolor="white" width="600" style="border-radius: 4px; color: grey; font-family: sans-serif; font-size: 18px; line-height: 28px; padding: 40px 40px;">
            <h1 style="color: black; font-size: 32px; font-weight: bold; line-height: 36px; margin: 0 0 30px 0;">This is an actual heading!</h1>
            <p style="margin: 0 0 30px 0;">And this is a paragraph of copy. You can see that it really is a paragraph in the code, not just some text broken up by line breaks. <em style="color: black;">And this emphasized text uses an actual <code>em</code> tag.</em> Imagine that! There was a <code>code</code> tag in there, too. Did you catch it?</p>
            <p style="margin: 0 0 30px 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quisquam, perferendis, non ratione pariatur quam quidem ad temporibus magni sed veritatis autem iure eligendi soluta blanditiis provident reprehenderit magnam. Facere!</p>
            <p style="margin: 0 0 30px 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo voluptas debitis, quas officia repellendus quaerat velit doloribus eaque iure tempora, veniam accusantium iusto. Molestias ex exercitationem assumenda nulla. Totam, dolorum.</p>
          </td>
          <td bgcolor="aliceblue" style="font-size: 0;">&​nbsp;</td>
      </tr>
    </table>
  </body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.