Not like net browsers, e-mail purchasers interpret HTML of their distinctive methods, affecting the structure, performance, and look of your emails.
With this information, I intention to create a complete HTML parts toolkit that can assist you optimize emails for various purchasers. Additionally, I’ll be referencing CSS, however the primary focus is on HTML.
Supported HTML tags overview
Examine the desk that includes generally used tags, together with their perform and compatibility with completely different e-mail purchasers. Click on on the tags to leap to a extra detailed rationalization and sensible ideas.
Universally supported HTML tags: detailed explanations
Beneath, you’ll discover the tags that kind the inspiration of e-mail design and are dependable with most e-mail purchasers. I categorized them based mostly on the perform; you’ll additionally discover tiny code snippets displaying how the tags are supposed for use.
Primary textual content formatting
Universally supported textual content formatting tags are the next.
<b>: makes the textual content inside the tag daring
<i>: makes the textual content inside the tag italicized
<u>: provides an underline to the textual content inside the tag
<p>: defines a paragraph of a textual content, essential for organizing copy into readable blocks
<robust>: creates a robust emphasis; just like <b>, however extra semantically significant
<em>: just like <i>, however it’s used for delicate emphasis; you need to use it to focus on key phrases and phrases elegantly
Reminder: The tags above are dependable throughout Gmail, Outlook, Apple Mail, Yahoo, and different purchasers. Your styling will stay constant throughout these platforms.
Hyperlinks and anchor tags
Positive, the <a href=””> tag is universally supported, however there are some particular quirks I’d like to attract your consideration to.
Primary utilization: outline the hyperlink with the <a href=””> tag, making certain it contains the complete URL to forestall errors.
Gmail: helps inline styling inside anchor tags, so you may customise the looks of hyperlinks with CSS (e.g., colour, text-decoration).
Outlook: usually strips CSS types from hyperlinks, so you want to use the text-decoration perform straight inside the tag.
Apple Mail: usually respective of styling inside <a> tags, so that you’re versatile with colours and underlines.
To emphasize, testing hyperlinks throughout completely different purchasers is crucial because the help degree might change. I’ll cowl the small print underneath the “Greatest practices” part.
Ordered and unordered lists
Lists are supported throughout the board (each <ol> and <ul>), however word that spacing and indentation might range. Listed here are fundamental examples.
Professional Tip: Outlook might typically add further areas round listing objects. Should you use CSS padding changes with the <li> aspect, you may fine-tune the structure consistency.
Picture help
Once more, photos are extensively supported, however sure attributes and picture behaviors might range, significantly with Outlook and Yahoo Mail.
Attributes:
src: specifies the picture URL. Use absolute URLs, as relative paths often don’t load accurately.
alt: supplies various textual content for accessibility; this might be invaluable in case your photos fail to load.
width and peak: outline the specific dimensions to manage picture show and forestall resizing points with Outlook.
Shopper-specific issues:
Outlook: It might ignore sure styling or photos. For instance, this sometimes occurs with max-width, which causes photos to seem stretched. To beat this, use the precise dimensions and keep away from relying solely on CSS for responsiveness.
Yahoo Mail: It has restricted help for customized picture styling. You must check the e-mail template completely, primarily if it makes use of photos with backgrounds or borders.
Tip: Hold the photographs inside a hard and fast width or depend on pixel values slightly than percentages. This helps guarantee photos render properly with most purchasers.
HTML tags with restricted or partial help
Partially supported and restricted help tags require particular workarounds to get the consistency you’re searching for. I’ll briefly cowl the essential construction, attributes, workarounds, and many others.
Tables
Though desk renderings are widespread in e-mail layouts, they’ll range. The discrepancies are the obvious with Gmail and Outlook. Examine the examples and tricks to retain exact management over the e-mail construction.
Attributes:
width: outline a hard and fast width for tables to take care of constant layouts with completely different purchasers.
cellpadding and cellspacing: be certain to manage each attributes or your spacing might seem off.
Shopper-specific ideas:
Gmail usually helps tables however might require inline CSS for padding and margin changes. Additionally, keep away from nesting tables too deeply to forestall show points.
Outlook renders tables utilizing the Microsoft Phrase engine (a nightmare should you ask me 😀), which regularly disregards CSS-based layouts. To get desired consistency, specify widths inside the <td> tags and keep away from superior CSS to outline positions inside tables.
Right here’s an instance of a constant desk styling:
Enter parts and types
Types and different parts should not extensively supported, so keep away from utilizing them straight in your emails. However, in fact, there’s at all times a workaround; examine the small print under.
Unsupported parts: <kind>, <enter>, <button>, and <textarea> sometimes gained’t perform in Gmail, Outlook, or Yahoo Mail.
Workaround: Use a call-to-action hyperlink and direct customers to a touchdown web page the place they’ll fill out a kind.
Divs and spans
Being partially supported throughout completely different purchasers, the <div> and <span> tags are sometimes utilized in mixture with inline types to enhance compatibility. I’ll cowl the essential utilization and a few ideas and tips (there’s actually no workaround right here).
Primary utilization:
<div>: sometimes used for block-level parts, it helps set up completely different sections inside an e-mail.
<span>: that is an inline container usually used for styling particular textual content parts.
Inline styling: As indicated earlier, plenty of e-mail purchasers strip the embedded and exterior CSS, making inline styling important for these tags. ⬇️Examine the exemplary snippet on how you can use the <div> tag.
Shopper-specific ideas:
Outlook: it could ignore sure inline types; I recommend utilizing the <desk> aspect for extra advanced layouts.
Responsive design: Gmail and Apple Mail help media queries so it’s attainable to regulate <span> and <div> types for cellular gadgets. Nevertheless, the responsiveness of such emails may be unpredictable with Outlook. To beat that, use fallback designs for advanced layouts.
Shopper-specific issues for HTML rendering
Examine how you can tailor your HTML for Gmail, Outlook, Apple Mail, and different generally used e-mail purchasers.
Gmail
Total, Gmail helps many CSS and HTML options; even so, the shopper has its quirks. Right here’s what to remember.
CSS: Gmail helps fundamental inline CSS and a few media queries. Nevertheless, it doesn’t at all times render exterior and embedded types reliably. Due to this fact, it’s finest to depend on inline types as an alternative.
Recognized Gmail rendering points:
Picture blocking: Very often, Gmail blocks photos by default, and customers must allow them manually. Add alt textual content to <img> tags to take care of e-mail accessibility when the photographs are blocked.
Media queries: Gmail helps media queries on cellular, however it doesn’t help media queries in desktop apps. So apply media queries just for mobile-specific styling.
Outlook
To remind you, Outlook makes use of Microsoft Phrase’s rendering engine, which may set off sudden points. I already talked about a number of tips about how you can overcome this, so this part is like an prolonged recap.
CSS and HTML limitations: Outlook sometimes ignores CSS properties resembling margin, padding, and float. To work round this, rely closely on <desk> parts for structure, cell padding and cell spacing attributes.
Pictures: If photos lack express width and peak, Outlook is more likely to show them incorrectly. So, be certain to outline these attributes.
Right here’s an instance of code for a table-based structure with cell padding and cell spacing.
Fast ideas:
Use tables for layouts because of the restricted CSS help.
Keep away from advanced layouts with nested tables.
Take a look at e-mail template designs with Outlook desktop and net variations – they could render in another way.
Apple Mail and different purchasers
Arguably, Apple Mail has the strongest help for HTML and CSS, making it one of the dependable purchasers for superior e-mail design. Right here, I’ll additionally provide some ideas and tips for Yahoo, AOL, and another purchasers.
Apple Mail:
Helps inline and embedded CSS and media queries.
You may render strong HTML5 parts and have gradients, animations, and net fonts.
Essential Be aware: Though Apple Mail helps it, go straightforward on advanced styling, net fonts, and particularly animations. There’s a excessive likelihood different purchasers gained’t help them, and so they might have an effect on e-mail deliverability, not solely accessibility.
Yahoo Mail:
Helps inline types and embedded CSS. Nevertheless, some superior properties like show: flex might not render correctly.
Yahoo usually blocks or delays picture loading, so you must embody alt textual content.
AOL and Thunderbird:
These purchasers have HTML/CSS help just like Yahoo. However Thunderbird affords a extra dependable rendering of embedded and inline types.
Typically, keep away from superior inline strategies. The identical goes for superior CSS layouts resembling flexbox (applies to Yahoo, AOL, and Thunderbird).
Greatest practices for utilizing HTML tags in emails
Honestly, this entire article is sort of a listing of finest practices. So right here, I’d prefer to give attention to testing and the Mailtrap Electronic mail Testing software. And I’ll additionally cowl tips about creating mobile-responsive designs.
Electronic mail testing throughout completely different purchasers
I’d at all times advocate a software that explicitly reveals help throughout completely different e-mail purchasers and offers you actual references to which traces of code is likely to be problematic.
Mailtrap Electronic mail Testing is one such software. It’s a part of the Mailtrap Electronic mail Supply Platform and an e-mail sandbox for inspecting emails in staging, dev, and QA environments.
The essential factor is that it affords the next:
HTML/CSS examine (with percentile shopper help and express references to problematic traces of code)
Electronic mail preview (net, cellular, and desktop)
If you want to check so much or have a number of tasks, Mailtrap Electronic mail Testing additionally affords API for QA automation, a number of testing inboxes, person administration, and e-mail template testing by way of API.
For Mailtrap Electronic mail API/SMTP customers, API permits for a simple transition from testing to manufacturing necessities. You may change a number of traces of code and ship your templates as quickly as you’re certain they’re prepared for recipients.
Cellular responsiveness
Beforehand, I discussed some tips for cellular responsiveness, and on this part, I mix them and offer you some hands-on ideas.
Use inline styling to outline mobile-friendly properties resembling padding, font measurement, and line peak.
You should utilize media queries to regulate structure, font measurement, and pictures for cellular screens. Nevertheless, don’t overlook that Outlook doesn’t help these, not like Gmail and Apple Mail. Right here’s a fast instance.
A single-column structure scales properly throughout completely different gadgets, that’s why you must use it for cellular.
Use bigger fonts and buttons to enhance accessibility and readability on smaller screens. Additionally, thoughts the CTA hit space and their hierarchy; see the ballpark values under ⬇️
Gmail: 36 x 48 pixels
Apple Mail: 48 x 48 pixels
Outlook: 26 x 34 pixels
Wrap-up
By now, you’re geared up with all you want to use HTML tags in your emails successfully. And sure, it’s a cautious stability between universally supported tags, your design, and the tags that want some intelligent workarounds.
However don’t overlook, your job doesn’t cease when you could have a extremely accessible and deliverable template. You must maintain testing and refining your strategy since e-mail purchasers will maintain evolving.
