What Is an HTML Email?
An HTML email is a message coded in HyperText Markup Language (HTML) rather than plain text. Where a plain-text email is just characters and line breaks, an HTML email can include headers with your logo, hero images, product grids, branded colour schemes, call-to-action buttons, and carefully chosen typography. This visual capability makes it the default format for almost all commercial email marketing campaigns, from a weekly retail newsletter to a post-purchase receipt.
The code powering an HTML email differs significantly from the HTML used on websites. Because email clients do not share a common rendering engine, HTML emails must be built to an older and more restricted standard. Modern CSS features such as flexbox, grid layout, and external fonts are not reliably supported. Instead, most professional email code relies on table-based layouts, inline CSS, and widely supported HTML attributes. This is not a limitation of the format itself but a consequence of the fragmented landscape of email clients, each with its own rendering behaviour.
A key technical consideration is the 102KB size limit in Gmail. When an HTML email exceeds this file size, Gmail clips it and shows subscribers a "View entire message" link at the bottom. Clipped emails receive far fewer clicks and can mask your unsubscribe link, creating compliance and user experience issues. Keeping your HTML compact, hosting all images on an external content delivery network rather than embedding them, and avoiding unnecessary whitespace in the code are all practices that help stay within the limit.
Accessibility is an increasingly important dimension of HTML email design. South African businesses sending emails to large databases should ensure their HTML emails include descriptive alt text on all images, sufficient colour contrast for text, a readable minimum font size of at least 14px, and a meaningful reading order for screen readers. These practices not only serve subscribers who rely on assistive technology but also improve overall deliverability, since accessible emails tend to have cleaner code that spam filters treat favourably.
HTML Email In Practice
The scenario below is an illustrative example, not a Juicy Designs client result. The figures indicate the scale of effect that HTML email testing typically produces, so treat them as indicative rather than measured.
Picture a Durban-based retail brand that launches a monthly promotional newsletter using an HTML email template. The template includes a full-width hero image of its latest product range, a two-column product grid with prices in rand, a large orange CTA button linking to its online store, and a footer with contact details and an unsubscribe link. Before sending to a list of around 25,000 subscribers, the brand's agency would test the template across the ten most used email clients with a tool such as Litmus. A test like this might catch a broken layout in Outlook 365 caused by an unsupported CSS property, and a fix of that kind would typically take around ten minutes before send. Without testing, that broken layout could reach thousands of subscribers.
Good HTML email practice also involves pairing every HTML campaign with a properly edited plain-text version, keeping image-to-text ratio balanced so spam filters do not flag the message as image-only spam, and ensuring every link is tracked correctly for click-through rate reporting. These habits separate a professional email marketing programme from amateur batch-and-blast campaigns, and they directly affect both deliverability and conversion outcomes for South African businesses.
How HTML emails work
An HTML email is an email built with HTML (and limited CSS) to include formatting, images, colours, layout, buttons and styling, rather than being plain unformatted text. Most marketing emails are HTML emails, because the visual formatting lets brands present content attractively and on-brand, include images and clear calls-to-action buttons, and structure the message with layout, which supports engagement and conversion. HTML emails work by the email client rendering the HTML much as a browser renders a web page, though email clients support HTML and CSS inconsistently and more restrictively than browsers, which is the central challenge of building them: what looks right in one email client may break in another. This is why HTML emails are typically built with more conservative, well-tested techniques than web pages, often using table-based layouts and inline CSS for reliability across the many email clients and devices recipients use. The visual richness of HTML email is its value, letting brands communicate with design and imagery, but that richness must be built carefully to render consistently across a fragmented landscape of email clients.
HTML email considerations
Building effective HTML emails means working within email's constraints. Rendering inconsistency across email clients is the biggest, so emails are built and tested to display acceptably across the common clients and devices, using reliable techniques (often table-based layouts and inline CSS, since many clients strip out or ignore linked stylesheets and modern CSS) and testing before sending. Images need care: they may be blocked by default in some clients until the recipient chooses to load them, so an email should still make sense and carry its message and calls to action even with images off, which means not relying solely on images for essential content and using descriptive alt text. Mobile matters greatly, since much email is read on phones, so responsive or mobile-friendly design is important. File size and load also matter for a smooth experience. And accessibility, including a logical structure and alt text, ensures the email works for all recipients. Including a plain-text version alongside the HTML is good practice for deliverability and for recipients or clients that prefer plain text. Attending to these considerations, cross-client rendering, image handling, mobile, and a plain-text alternative, is what makes an HTML email both attractive and reliable, delivering its formatted message consistently to the varied clients and devices recipients actually use.
FAQ
What is the maximum file size for an HTML email?
Gmail clips any email that exceeds 102KB in HTML size, hiding content behind a 'View entire message' link. Most email best practices recommend keeping your HTML email under 100KB. Images should be hosted externally on a CDN, not embedded in the email, to keep file size down and improve deliverability.
Should HTML emails use inline CSS or a stylesheet?
HTML emails should use inline CSS because many email clients, including Gmail, strip CSS from the head of the document. Inline styles applied directly to each HTML element are the safest and most widely supported approach. Email sending platforms like Mailchimp and Klaviyo typically handle CSS inlining automatically when you use their template builders.
Should you include a plain-text version with an HTML email?
Yes, it is good practice to include a plain-text version alongside the HTML. It supports deliverability, since some spam filters view emails with both versions more favourably, and serves recipients or clients that prefer or only display plain text, ensuring your message is readable regardless of how it is received.