<!DOCTYPE html>
<html lang="en">
    <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">
        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; }
  <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%">
          <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;">
            <span style="color: black; font-size: 32px; font-weight: bold; line-height: 36px;">This looks like a heading, but it's not.</span>
            And this is a paragraph of copy. You can see that it's not really a paragraph in the code, but just some text broken up by line breaks. <span style="color: black; font-style: italic;">This is how a lot of people do it.</span> Notice how I used a span and some inline styles to emphasize that text? Yep, they do that, too. 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam nulla quis, deleniti fuga nisi accusantium quas illum aspernatur excepturi quae, repellat, ad, iure quo recusandae fugit. Harum corrupti nulla voluptas! 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae eum necessitatibus officia accusamus veniam, deserunt recusandae, unde odit facere at corrupti ratione, voluptatem nemo inventore, debitis omnis. Voluptate, quis, reprehenderit. 
          <td bgcolor="aliceblue" style="font-size: 0;">&​nbsp;</td>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.