How to Hide Elements in HTML Email
Have you ever wondered the best way to hide elements in email? Whether you're trying to hide/show images on desktop or mobile, or want to hide certain parts from different email clients, we take a look at how you can target a range of email clients and the attributes you can use to hide elements within them.
This article references the amazing resource set up by Dylan Smith and contributed to by the email geeks community: howtotarget.email
For the examples below, we'll assume you are using inline styles and embedded styles in the <head> of your email.
Controlling image size with media queries
In the example below we use a media query to trigger a different image width on screens that have a max-device-width of 600px. Using inline CSS for the majority of styling and embedded CSS in the head with !important to override on mobile.
HTML5 hidden attribute
In HTML5 there is a hidden attribute. Adding this to your element will hide it even if the CSS doesn't load. It is also hidden from screen readers and is not selectable with mouse or keyboard.
Email client support: Apple Mail, Samsung Mail 4.4+, Outlook app iOS, iOS Mail
CSS display: none
The CSS display attribute hides everything within the element including child elements — so if set on a whole table, all its content will also be hidden. It also removes the space the element used to occupy, so content below moves up to fill it. Like hidden above, it is not visible to screen readers or clickable.
Tip: Elements with display: none still load — so hiding a tracking pixel will still fire and consume bandwidth, it just won't be seen by the user.
Outlook (Windows Desktop) supports display: none only on parent elements such as div or td — not on an img tag directly. Nested tables will not inherit display: none, so you need to add it to every child table element. Always test your emails to make sure what you want hidden stays hidden.
Email client support: All email clients
CSS opacity: 0
Opacity changes how opaque an element is. Using opacity: 0 makes an element transparent, but unlike hidden and display: none, the element still keeps its shape and size — so blocks underneath won't move up to fill the space. The element is still read by screen readers and is still clickable.
Email client support: Apple Mail, Outlook Mac, Freenet, Gmail, Office 365, Outlook.com, T-online.de, IBM Notes 10, Samsung Mail
CSS visibility: hidden
Works the same as opacity: 0 — the element is visually hidden but still keeps its space and is still selectable with the keyboard or mouse and still read by screen readers. Unlike the other methods, you can override visibility: hidden on a child element by setting visibility: visible on that child, while the rest of the parent remains hidden.
Email client support: Apple Mail, Outlook Mac, Freenet, Yahoo, Office 365, Outlook.com, T-online.de, IBM/Lotus Notes, Samsung Mail, Web.de, Mail.ru, Gmx, Comcast
aria-hidden="true"
aria-hidden won't hide an element visually, but will hide it from the accessibility tree and from screen readers. Not all email clients preserve aria tags in the HTML. For decorative images, it's better practice to simply use an empty alt attribute: alt="".
font-size: 0; line-height: 0
These two properties can be used together to hide text within email. Using font-size: 0 alone will leave line-height spacing still visible in some clients, so they are best used in conjunction. All email clients support this combination.
Hiding desktop images on mobile
Using display: none — which is supported across all email clients — we can hide elements on desktop and show different ones on mobile. Wrap the mobile image in a container element and set both to display: none inline. Then in a media query in the <head>, switch the container to display: block at a breakpoint (e.g. 640px), while hiding the desktop image with the same approach in reverse.
Hiding from Outlook desktop (MSO conditional comments)
Outlook 2007–2019 uses the Word rendering engine and supports conditional comments to target specific versions using operators and version numbers.
Operators: gt (greater than), gte (greater than or equal to), lt (less than), lte (less than or equal to)
Version numbers: Outlook 2000 = 9, Outlook 2002 = 10, Outlook 2003 = 11, Outlook 2007 = 12, Outlook 2010 = 14, Outlook 2013 = 15, Outlook 2016/2019 = 16
For a more in depth article on MSO comments - check out our Head of Dev's blog - All about MSO Comments
Mark Robbins of Customer io also found that surrounding content with the mso-element attribute will hide it from all Microsoft Desktop Outlooks. This method is especially useful for ESPs or development environments that don't support MSO conditional comments.
Outlook app (iOS / Android)
To hide an element from the Outlook app, we can target the [data-outlook-cycle] attribute which is added to the root element of all emails opened in these apps. We can then target specific elements within via a descendant selector.
Outlook webmail (outlook.com)
To target Outlook webmail we take advantage of the way it prefixes all class names with x_. The CSS attribute selector with the ~ operator can then be used to target any element containing that prefixed class name.
Gmail
Gmail converts the <body> tag to a <div>. By adding class="body" to your body tag and then targeting child elements you want to hide with a descendant selector and display: none, you can hide content specifically in Gmail. Wrapping this in a media query lets you limit it to mobile screens only.
Yahoo and AOL
Yahoo and AOL now use the same rendering engine and can be targeted together. A wrapping div with the class .& lets you chain a selector to target specific child elements.
To target only Yahoo, add a div with a unicode ID — AOL strips that style, so the rule only affects Yahoo.
Hide stuff!
This isn't an exhaustive list, but hopefully it covers the fundamentals of hiding elements from different email clients with CSS targeting. Combine these methods and find the CSS target you need on howtotarget.email
See more posts