<!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;"> </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>
<br>
<br>
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.
<br>
<br>
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!
<br>
<br>
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>
<td bgcolor="aliceblue" style="font-size: 0;"> </td>
</tr>
</table>
</body>
</html>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.