Supported HTML Tags in Common Email Clients

In contrast to internet browsers, e mail purchasers interpret HTML of their distinctive methods, affecting the format, performance, and look of your emails. 

With this information, I goal to create a complete HTML parts toolkit that will help 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 suggestions. 

Universally supported HTML tags: detailed explanations

Under, you’ll discover the tags that kind the inspiration of e mail design and are dependable with most e mail purchasers. I categorized them primarily based on the perform; you’ll additionally discover tiny code snippets displaying how the tags are supposed for use. 

Fundamental 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

• sturdy>: creates a robust emphasis; much like b>, however extra semantically significant

• em>: much like i>, however it’s used for refined emphasis; you should use it to spotlight 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. 

• Fundamental utilization: outline the hyperlink with the a href=””> tag, making certain it consists of the total URL to stop errors. 

• Gmail: helps inline styling inside anchor tags, so you may customise the looks of hyperlinks with CSS (e.g., coloration, text-decoration). 

• Outlook: typically strips CSS kinds from hyperlinks, so it’s essential use the text-decoration perform instantly 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 main points beneath the “Finest practices” part. 

Ordered and unordered lists

Lists are supported throughout the board (each ol> and ul>), however notice that spacing and indentation could fluctuate. Listed below are fundamental examples. 

Professional Tip: Outlook could generally add additional areas round record objects. In the event you use CSS padding changes with the li> aspect, you may fine-tune the format consistency. 

Picture help

Once more, photos are extensively supported, however sure attributes and picture behaviors could fluctuate, significantly with Outlook and Yahoo Mail. 

Attributes:

• src: specifies the picture URL. Use absolute URLs, as relative paths often don’t load appropriately. 
• alt: supplies different textual content for accessibility; this could possibly be invaluable in case your photos fail to load. 
• width and peak: outline the specific dimensions to regulate picture show and forestall resizing points with Outlook. 

Consumer-specific issues:

• Outlook: It could ignore sure styling or photos. For instance, this usually 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. It’s essential to take a look at the e-mail template completely, primarily if it makes use of photos with backgrounds or borders. 

Tip: Preserve the photographs inside a hard and fast width or depend on pixel values somewhat 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 on the lookout for. I’ll briefly cowl the fundamental construction, attributes, workarounds, and so forth. 

Tables

Despite the fact that desk renderings are frequent in e mail layouts, they will fluctuate. 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: make sure that to regulate each attributes or your spacing could seem off.  

Consumer-specific suggestions:

• Gmail usually helps tables however might require inline CSS for padding and margin changes. Additionally, keep away from nesting tables too deeply to stop 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 varieties

Types and different parts will not be extensively supported, so keep away from utilizing them instantly in your emails. However, in fact, there’s at all times a workaround; test the main points under. 

• Unsupported parts: kind>, enter>, button>, and textarea> usually 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 will 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 kinds to enhance compatibility. I’ll cowl the fundamental utilization and a few suggestions and methods (there’s actually no workaround right here). 

Fundamental utilization:

• div>: usually used for block-level parts, it helps manage completely different sections inside an e mail. 
• span>: that is an inline container typically used for styling particular textual content parts. 

• Inline styling: As indicated earlier, lots of e mail purchasers strip the embedded and exterior CSS, making inline styling important for these tags. ⬇️Examine the exemplary snippet on the right way to use the div> tag. 

Consumer-specific suggestions: 

• Outlook: it could ignore sure inline kinds; I recommend utilizing the desk> aspect for extra complicated layouts. 
• Responsive design: Gmail and Apple Mail help media queries so it’s attainable to regulate span> and div> kinds for cell gadgets. Nonetheless, the responsiveness of such emails could be unpredictable with Outlook. To beat that, use fallback designs for complicated layouts. 

Consumer-specific issues for HTML rendering

Examine the right way to tailor your HTML for Gmail, Outlook, Apple Mail, and different generally used e mail purchasers. 

Gmail

Total, Gmail helps many CSS and HTML features; even so, the shopper has its quirks. Right here’s what to bear in mind. 

• CSS: Gmail helps fundamental inline CSS and a few media queries. Nonetheless, it doesn’t at all times render exterior and embedded kinds reliably. Due to this fact, it’s greatest to depend on inline kinds as a substitute. 

• Recognized Gmail rendering points:

• Picture blocking: Very often, Gmail blocks photos by default, and customers have to 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 cell, 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 surprising points. I already talked about a couple of tips about the right way to overcome this, so this part is like an prolonged recap. 

• CSS and HTML limitations: Outlook usually ignores CSS properties resembling margin, padding, and float. To work round this, rely closely on desk> parts for format, cell padding and cell spacing attributes. 
• Photos: If photos lack specific width and peak, Outlook is prone to show them incorrectly. So, make sure that to outline these attributes. 

Right here’s an instance of code for a table-based format with cell padding and cell spacing.

 Fast suggestions:

• Use tables for layouts because of the restricted CSS help. 
• Keep away from complicated layouts with nested tables. 
• Take a look at e mail template designs with Outlook desktop and internet variations – they might render in a different way. 

Apple Mail and different purchasers

Arguably, Apple Mail has the strongest help for HTML and CSS, making it one of the crucial dependable purchasers for superior e mail design. Right here, I’ll additionally supply some suggestions and methods for Yahoo, AOL, and another purchasers. 

Apple Mail:

• Helps inline and embedded CSS and media queries. 
• You’ll be able to render strong HTML5 parts and have gradients, animations, and internet fonts. 

Essential Word: Despite the fact that Apple Mail helps it, go straightforward on complicated styling, internet fonts, and particularly animations. There’s a excessive probability different purchasers gained’t help them, they usually could have an effect on e mail deliverability, not solely accessibility. 

Yahoo Mail: 

• Helps inline kinds and embedded CSS. Nonetheless, some superior properties like show: flex could not render correctly. 
• Yahoo typically blocks or delays picture loading, so you need to embrace alt textual content. 

AOL and Thunderbird:

• These purchasers have HTML/CSS help much like Yahoo. However Thunderbird presents a extra dependable rendering of embedded and inline kinds. 
• Usually, keep away from superior inline strategies. The identical goes for superior CSS layouts resembling flexbox (applies to Yahoo, AOL, and Thunderbird). 

Finest practices for utilizing HTML tags in emails

In truth, this entire article is sort of a record of greatest practices. So right here, I’d prefer to concentrate on testing and the Mailtrap Email Testing software. And I’ll additionally cowl tips about creating mobile-responsive designs. 

E 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 strains of code is likely to be problematic. 

Mailtrap E mail Testing is one such software. It’s a part of the Mailtrap E mail Supply Platform and an e mail sandbox for inspecting emails in staging, dev, and QA environments. 

The essential factor is that it presents the next:

• HTML/CSS test (with percentile shopper help and specific references to problematic strains of code)

• E mail preview (internet, cell, and desktop)

If it’s essential take a look at loads or have a number of tasks, Mailtrap E mail Testing additionally presents API for QA automation, a number of testing inboxes, consumer administration, and e mail template testing through API. 

For Mailtrap E mail API/SMTP customers, API permits for a straightforward transition from testing to manufacturing necessities. You’ll be able to change a couple of strains of code and ship your templates as quickly as you’re certain they’re prepared for recipients. 

Cellular responsiveness

Beforehand, I discussed some methods for cell responsiveness, and on this part, I mix them and offer you some hands-on suggestions. 

• Use inline styling to outline mobile-friendly properties resembling padding, font measurement, and line peak. 
• You need to use media queries to regulate format, font measurement, and pictures for cell screens. Nonetheless, don’t neglect that Outlook doesn’t help these, not like Gmail and Apple Mail. Right here’s a fast instance. 

• A single-column format scales properly throughout completely different gadgets, that’s why you need to use it for cell. 
• 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 outfitted with all it’s essential 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 neglect, your job doesn’t cease when you’ve gotten a extremely accessible and deliverable template. It’s essential to hold testing and refining your method since e mail purchasers will hold evolving.