Introduction

Building HTML for email means you’re dealing with more than four or five major web browsers, and 12 to 15 different email clients, each with solid market share. If you count every iteration of the email client/browser/product model, it would be 15,000 different possibilities.

Avoid Following HTML Tags

<style>
<head>
<iframe>
<object>
<applet>
<base> and <basefont>
<script>
<audio>
<video>
<form>
And some new HTML5 tags like
<section>
<article>
<header>
<footer> etc

While using <p> tag, ensure there are no extra spaces, especially before or after the opening and closing <p> tags. Use CSS to control spacing: Instead of relying solely on <p> tags for spacing, you can use CSS properties like margin or padding to control the spacing between paragraphs. Inline styles or embedded stylesheets within the HTML email signature can be used for this purpose.
 
Consider alternative markup: Instead of relying solely on <p> tags for paragraphs, you can use other HTML tags like <div> or <span> in combination with appropriate CSS style to achieve the desired spacing and formatting.

While creating email signatures for mobile devices, the signature width should be 400-500px wide. Also, you can use a vertical layout in the signature rather than a horizontal one for mobile devices.

To lay out your signature, we recommend using HTML tables where possible. You can use padding as well where possible to create space between the design elements. This will be read universally by all mail clients and mobile devices. You can set a fixed width on any table to ensure the signature fits on mobile devices, tablets, and monitors.

Enable text wrap where to show long text. And also, the long text should start from the very left.

To ensure consistent rendering and prevent HTML formatting from breaking on different devices and email clients, it's recommended to use a subset of HTML tags that are widely supported across platforms. Here are some commonly used HTML tags that have good compatibility:

<table>: Tables are widely supported and can be used for layout purposes in email templates. However, it's important to use simple table structures and inline CSS for better compatibility.

<tr>, <td>, <th>: These table-related tags are essential for structuring and organizing content within table cells. They are supported by most email clients.

<div>: The <div> tag is widely supported and can be used for grouping and styling elements within the email template. It's commonly used for creating containers and applying CSS styles.

<span>: The <span> tag is often used to apply inline styles or add specific formatting to small sections of text within the email.

<a>: The <a> tag is used for creating hyperlinks. Ensure that the href attribute is properly defined and that the link is accessible and visible to recipients.

<img>: The <img> tag is commonly used for embedding images within an email. It's important to set the src attribute correctly and include alternative text using the alt attribute for accessibility.

<strong> and <em>: These tags are used for applying emphasis to text. They are generally supported and can be used for adding bold or italic formatting to content.

<br>: The <br> tag is used for inserting line breaks within the content. It's commonly used to create new lines or paragraphs within the email.

Gmail, Outlook, Lotus Notes, and no doubt many more all have big issues with floating elements and are even wildly unreliable with margins and padding. You’ll want to set up some structural HTML tables to make sure you end up with an email that at least holds together well.

Dealing with Tables in an Email

There are some problems using tables, too. Here are a few tips for dealing with tables in an email.

Set Widths in Each Cell Rather Than the Table

The combination of widths on the table, widths on the cells, HTML margins and padding, and CSS margins and padding can be chaotic. Simplify your code, and your life, by setting only on each cell:

<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td width="150"></td>
    <td width="350"></td>
  </tr>
</table>

Email clients are unreliable when it comes to deducing the correct width of a cell, so it’s safest to explicitly set one. Pixel widths are the most reliable, as using percentages can give you some wacky results, especially when using nested tables.

To set your cell padding, either set it once on the whole table with the cellpadding parameter or use CSS to set padding in individual cells. Mixing the two is likely to cause problems and is best avoided.

Nest Tables for Consistent Spacing

Even when margins and padding are supported by most email clients, results will be inconsistent. If the spacing is critical to you, try nesting tables inside your main table instead. It’s old school, but it’s tried and true.

Set a Background Color on a Container Table

Some email clients will ignore a background on the <body>  tag, or one that’s set in your style sheet. Having a wrapping table around all your content and setting a bgcolor attribute on it will work around this issue.

Whitespace Matters

Theoretically, whitespace in HTML files should be ignored. But in practice, it can cause all sorts of rendering quirks—especially if you have whitespace between table cells. Make a habit of removing any spaces between the closing tag of one cell and the opening tag of the next to avoid unsightly gaps and layout problems.