Article Categories

Selected Reading

Write Emails In HTML and then Send Them using Gmail

Email HTML Web Services

HTML email combines the visual appeal of web pages with email communication, featuring graphics, colors, formatting, and structured layouts. Unlike plain text emails that contain only basic text content, HTML emails resemble newsletters and marketing materials with rich formatting, images, and interactive elements.

Email marketers consistently find that HTML emails perform better for conversions compared to plain text. However, creating effective HTML emails requires understanding email client limitations and following specific coding practices to ensure proper rendering across different platforms.

What is HTML Email?

HTML email uses HyperText Markup Language to create formatted messages that can include −

Images and graphics for visual appeal
Styled text with fonts, colors, and sizes
Tables and layouts for organized content presentation
Links and buttons for interactive elements
Background colors and styling for branding

Creating HTML Email Structure

HTML emails require specific coding practices different from regular web pages. Here's the basic structure −

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Subject</title>
</head>
<body style="margin: 0; padding: 0;">
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
            <td>
                <!-- Email content here -->
            </td>
        </tr>
    </table>
</body>
</html>

HTML Email Best Practices

Use Tables for Layout

Email clients have limited CSS support, so use tables for reliable layout structure −

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Newsletter Template</title>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif;">
    <table cellpadding="0" cellspacing="0" border="0" width="600" style="margin: 0 auto; background-color: #ffffff;">
        <tr>
            <td style="background-color: #007acc; padding: 20px; text-align: center;">
                <h1 style="color: #ffffff; margin: 0;">Company Newsletter</h1>
            </td>
        </tr>
        <tr>
            <td style="padding: 30px;">
                <h2 style="color: #333333;">Welcome to Our Monthly Update</h2>
                <p style="color: #666666; line-height: 1.6;">
                    This is our monthly newsletter with the latest updates and news.
                </p>
                <table cellpadding="0" cellspacing="0" border="0" style="margin: 20px 0;">
                    <tr>
                        <td style="background-color: #007acc; padding: 12px 24px; border-radius: 4px;">
                            <a href="#" style="color: #ffffff; text-decoration: none; font-weight: bold;">Read More</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Use Inline CSS

Many email clients strip out external stylesheets and header CSS. Use inline styles for reliable formatting −

<!-- Good: Inline styles -->
<p style="color: #333; font-size: 16px; line-height: 1.5;">Content</p>

<!-- Avoid: External CSS -->
<link rel="stylesheet" href="styles.css">

<!-- Avoid: Header CSS -->
<style>p { color: #333; }</style>

Email Client Limitations

Different email clients have varying levels of HTML and CSS support. Here are key limitations to consider −

Limitation	Reason	Solution
Background images	Blocked by many clients	Use solid background colors instead
External CSS	Stripped out for security	Use inline styles only
JavaScript	Disabled for security	Avoid entirely
Complex layouts	Poor CSS support	Use table-based layouts

Avoid These Common Mistakes

Never use a single large image for your entire message. Anti-spam filters flag this practice, and it creates accessibility issues −

<!-- Avoid: Single image email -->
<img src="newsletter.jpg" alt="Newsletter" width="600">

<!-- Better: Mixed content -->
<img src="logo.jpg" alt="Company Logo" width="200">
<h2>Newsletter Title</h2>
<p>Text content with formatting...</p>

Sending HTML Emails with Gmail

Gmail supports HTML email composition through its visual editor. For advanced HTML email creation, you can −

Use Gmail's Rich Text editor for basic formatting
Copy and paste HTML from external editors
Use third-party HTML email apps that integrate with Gmail
Compose in HTML editors and send via Gmail's interface

Adding Images to HTML Emails

For images in HTML emails, host them externally and reference via URL −

<!-- Host images externally -->
<img src="https://example.com/images/logo.png" alt="Company Logo" width="150" height="50">

<!-- Always include alt text -->
<img src="https://example.com/social-icon.png" alt="Follow us on Twitter" width="32" height="32">

Testing HTML Emails

Before sending, test your HTML emails across different clients −

Desktop clients − Outlook, Thunderbird, Apple Mail
Web clients − Gmail, Yahoo Mail, Outlook.com
Mobile clients − iOS Mail, Android Gmail

Example − Mobile-Responsive HTML Email

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Email</title>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif;">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 600px; margin: 0 auto;">
        <tr>
            <td style="padding: 20px; background-color: #f8f9fa;">
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td style="text-align: center; padding-bottom: 20px;">
                            <h1 style="color: #007acc; margin: 0; font-size: 28px;">HTML Email Template</h1>
                        </td>
                    &tr>
                    <tr>
                        <td style="background-color: #ffffff; padding: 30px; border-radius: 8px;">
                            <h2 style="color: #333333; margin-top: 0;">Professional Email Design</h2>
                            <p style="color: #666666; line-height: 1.6; margin-bottom: 20px;">
                                This HTML email template demonstrates proper structure, inline CSS, and mobile-responsive design principles for maximum compatibility.
                            </p>
                            <table cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td style="background-color: #007acc; padding: 12px 24px; border-radius: 4px;">
                                        <a href="https://example.com" style="color: #ffffff; text-decoration: none; font-weight: bold; font-size: 16px;">Call to Action</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center; padding-top: 20px; font-size: 12px; color: #999999;">
                            © 2024 Company Name. All rights reserved.
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

When to Choose HTML Email

HTML email is ideal when you need −

Marketing campaigns with branding and visual appeal
Newsletters with organized, structured content
E-commerce communications featuring products
Event invitations requiring rich formatting
Corporate communications maintaining brand consistency

Choose plain text email for simple, personal communications

karthikeya Boyini

Updated on: 2026-03-16T21:38:54+05:30

657 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next