Case for using <p> tags in email
<p> tags DO NOT support padding in outlook email clients. All spacing needs to be done in margin instead to be consistent across clients.
Saving Code Weight
Because <p> tags are inherently block-level elements, you don’t need to build a table around them for them to function. They also are naturally 100% width, so you don’t have to define that on each p element.
With just a small section of code the savings in total bytes aren’t significant, but each time you wrap a new table around your content you increase code weight, so in longer emails it can mean the difference between clipping an email or not clipping.
Example 1: Plain Block of Text
Old code:
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" class="content-table">
<tr>
<td class="padding10" align="left" valign="top" style="padding-top:10px;padding-bottom:10px;padding-right:0px;padding-left:0px;font-size:14px; line-height:21px;color:#333333;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;">
Find the right rental for your perfect vacation! Browse our inventory and please contact us to help you plan your next vacation!
</td>
</tr>
</table>Total file size: 506 bytes
New Code:
<p style="margin:10px 0;font-size:14px; line-height:21px;color:#333333;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;">
Find the right rental for your perfect vacation! Browse our inventory and please contact us to help you plan your next vacation!
</p>Total File Size: 262 bytes
Savings: 48%
Example 2: Block of text with a background color (callout box)
Old Code:
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" class="content-table" style="background-color:#cccccc;">
<tr>
<td class="padding10" align="left" valign="top" style="padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;font-size:14px; line-height:21px;color:#333333;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="content-table">
<tr>
<td class="padding10" align="left" valign="top" style="padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;font-size:14px; line-height:21px;color:#333333;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;">
Find the right rental for your perfect vacation! Browse our inventory and please contact us to help you plan your next vacation!
</td>
</tr>
</table>
</td>
</tr>
</table>Total Size: 955 bytes
New Code:
Total Size: 356 bytes
Savings: 63%
Simplicity and Clarity
You can keep your emails easier to read and digest on the code side because there’s less overhead. We all nest a bunch of tables, you just have to, but having a new table around each piece of text results in a lot of extra indentation, which can become a problem the more complex your email is. Every indent also costs more code weight, so the fewer indentations the better.
The <p> tag is also explicitly designated in the HTML standard as containing a paragraph. While HTML standards often go out the window for email, this one has become safer over the years, and it won’t be hard for anyone with web experience to understand what the tag is doing.