{"id":3557,"date":"2021-07-23T12:57:35","date_gmt":"2021-07-23T16:57:35","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails\/"},"modified":"2025-12-15T15:37:24","modified_gmt":"2025-12-15T20:37:24","slug":"how-to-remove-blue-links-in-html-emails","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails","title":{"rendered":"Frustrated by Blue Links in Email? Conquer Them for Good"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_a5f5e13377d8c9630490e349c9d3b3bb\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>Blue links in email: They\u2019re a helpful usability feature, but far too often cause headaches for email marketers looking to design thoughtful, on-brand campaigns.<\/p>\n<p>Over the years, we\u2019ve seen multiple ways of handling blue links in HTML emails, from simple to complex.<\/p>\n<p>But which techniques work the best? And how can marketers ensure a beautiful <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-design\/\">email design<\/a> without sacrificing useful functionality in an email? In this guide, we\u2019ll look at what blue links are and the best way to prevent them from ruining your own emails. Get ready to learn:<\/p>\n<ul>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#what\">What are blue links?<\/a><\/li>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#why\">Should you remove them?<\/a><\/li>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#how\">How to change them<\/a> for each email client<\/li>\n<li aria-level=\"1\"><a style=\"background-color: #ffffff; font-size: 1rem;\" rel=\"noopener\" href=\"#edge-cases\">Edge cases as fallback<\/a> (and for Outlook)<\/li>\n<\/ul>\n<div class=\"cta\">\n<table style=\"background-color: #f1f0f0; margin-bottom: 30px;\">\n<tbody>\n<tr>\n<td class=\"block-1\" style=\"padding: 20px 10px 20px 20px;\"><img decoding=\"async\" class=\"alignnone size-full wp-image-24298\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/08\/the-anatomy-of-a-broken-email-2nd-edition-ebook-cover.png\" alt=\"The Anatomy of a Broken Email (2nd Edition)\" width=\"601\" height=\"774\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/08\/the-anatomy-of-a-broken-email-2nd-edition-ebook-cover.png 601w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/08\/the-anatomy-of-a-broken-email-2nd-edition-ebook-cover-233x300.png 233w\" sizes=\"(max-width: 601px) 100vw, 601px\" \/><\/td>\n<td class=\"block-2\" style=\"padding: 20px 20px 20px 10px;\">\n<p class=\"zero\"><strong>Beware: There are other culprits of a broken email<br \/>\n<\/strong><\/p>\n<p class=\"zero\">Do email errors make you shudder? Blue links are just one way your email can look broken. Take a deep dive into what can break your email and the tips &amp; tricks to stay true.<\/p>\n<p class=\"zero\"><a class=\"btn medium orange button\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/anatomy-of-a-broken-email\/\" target=\"_blank\" rel=\"noopener noreferrer\">Reveal common issues and fixes \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h2 id=\"what\">What are blue links?<\/h2>\n<p>Blue links are exactly what they sound like: Text in an email that takes on the default blue, underlined styling common to hyperlinks. In email marketing\u2014especially on mobile devices\u2014these blue links are automatically created by email clients to provide people with options for saving or interacting with information.<\/p>\n<p>In recent years, Apple Mail has updated their handling of some of these links and no longer turns them blue. For addresses and times, iOS devices retain the original styling but add a dotted underline to indicate that these are clickable.<\/p>\n<p>While this is a step forward for accessibility for some of the blue link issues, it does not solve all the problems because more than just addresses and times can be affected.<\/p>\n<p>Most iOS versions of Apple Mail turn phone numbers, URLs, and email addresses blue\u2014but leave physical addresses and times in the original styled color (red, in the example below).<\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-31967 size-full\" style=\"border: 1px solid #8994A1;\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/iphone12promax-vertical-allowed-1366.png\" alt=\"blue links in email, in Apple iOS\" width=\"428\" height=\"323\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/iphone12promax-vertical-allowed-1366.png 428w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/iphone12promax-vertical-allowed-1366-300x226.png 300w\" sizes=\"(max-width: 428px) 100vw, 428px\" \/>\n<p>In iOS 13, the content is still linked, but the original styled color is maintained:<\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-31966 size-full\" style=\"border: 1px solid #8994A1;\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/iphonese2020-vertical-allowed-1366.png\" alt=\"auto-links in Apple Mail iOS 13\" width=\"375\" height=\"319\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/iphonese2020-vertical-allowed-1366.png 375w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/iphonese2020-vertical-allowed-1366-300x255.png 300w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/>\n<p>In our testing, these things are prime candidates for becoming linked content (blue or otherwise):<\/p>\n<ul>\n<li aria-level=\"1\">Addresses<\/li>\n<li aria-level=\"1\">Dates<\/li>\n<li aria-level=\"1\">Email addresses<\/li>\n<li aria-level=\"1\">Website URLs<\/li>\n<li aria-level=\"1\">Times<\/li>\n<li aria-level=\"1\">Phone numbers<\/li>\n<\/ul>\n<h2 id=\"why\">The benefits of blue links: Should you remove them or not?<\/h2>\n<p>In each case, the information linked could be valuable to subscribers, whether they want to add a phone number to their contacts list or look up an address online. While annoying from a branding perspective, blue links are actually <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow\/\">great for usability and accessibility<\/a>, providing critical functionality.<\/p>\n<p>This brings up the debate: Should we be overriding this behavior in the first place?<\/p>\n<p>On the one hand, we want our email designs to stay consistent and on-brand. Email clients overriding our own styling can cause surprises, anger stakeholders, and cause accessibility issues. On the other hand, people may rely on this functionality and expect to be able to take action on information in an email.<\/p>\n<p>So, what should email designers do?<\/p>\n<p>It\u2019s our opinion that overriding the styles\u2014<i>but not the functionality\u2014<\/i>of these links is the best approach. The ideal solution for blue links should retain the ability to take action on those automatically generated links but allow us to style those links, not the operating system or email client.<\/p>\n<p>Some would argue that overriding the blue, underlined styling is going too far. However, the default behavior has serious accessibility problems that we can combat. For example, look at this email footer with blue links added to the address:<\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-31965 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/footer.png\" alt=\"example of blue links in email footer\" width=\"1444\" height=\"623\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/footer.png 1444w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/footer-300x129.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/footer-1024x442.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/footer-768x331.png 768w\" sizes=\"(max-width: 1444px) 100vw, 1444px\" \/>\n<p>It\u2019s a common design: White text on a black background, with small text to keep the focus on the content above it. When information is linked and the blue styling is applied, the contrast is extremely low. Anyone with visual impairments\u2014or those with excellent sight using a dimmed screen or mobile device in a sunny setting\u2014will have an extremely difficult time consuming that information. A helpful feature turns into a frustrating experience.<\/p>\n<p>Not all email clients treat auto-linking the same, either. While blue links are the most common culprit, some clients maintain the font color but add a subtle underline. Some clients link telephone numbers but not addresses. With all of that inconsistency, it can be frustrating to manage.<\/p>\n<p>So, how can email designers deal with blue links?<\/p>\n<h2 id=\"how\">The best way to override auto-link styling<\/h2>\n<p>Although we\u2019ve looked at different solutions in the past\u2014like targeting commonly-linked text with spans and classes, or inserting non-visible characters into that text to break the behavior\u2014the best solution we\u2019ve found is to rely on embedded CSS to override automatic link styling. Then, add values such as underlines and on-brand colors to let people know the content is still clickable. Ideal for usability and accessibility.<\/p>\n<p>This method has a lot going for it. You can:<\/p>\n<ul>\n<li aria-level=\"1\">Set your own styles on text.<\/li>\n<li aria-level=\"1\">Use different styles for different links\u2014it doesn\u2019t force one style across an email.<\/li>\n<li aria-level=\"1\">Retain the functionality introduced by email clients and operating systems.<\/li>\n<li aria-level=\"1\">Maintain the styling easily.<\/li>\n<\/ul>\n<p>That\u2019s a win-win for both you and your subscribers.<\/p>\n<p>The only caveat? Different email clients do different things when auto-linking text, so you need multiple CSS rules to override styling.<\/p>\n<div class=\"cta\">\n<table style=\"background-color: #f1f0f0; margin-bottom: 30px;\">\n<tbody>\n<tr>\n<td class=\"block-1\" style=\"padding: 20px 10px 20px 20px;\"><img decoding=\"async\" class=\"alignnone size-full wp-image-17005\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/06\/thorough-check-icon.png\" alt=\"thorough-check-icon\" width=\"194\" height=\"194\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/06\/thorough-check-icon.png 194w, https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/06\/thorough-check-icon-150x150.png 150w\" sizes=\"(max-width: 194px) 100vw, 194px\" \/><\/td>\n<td class=\"block-2\" style=\"padding: 20px 20px 20px 10px;\">\n<p class=\"zero\"><strong>Do your emails have blue links?<br \/>\n<\/strong><\/p>\n<p class=\"zero\">Always know when email clients update their email rendering with Litmus Email Previews. Preview your emails in all popular email clients and devices and spot errors before you send.<\/p>\n<p class=\"zero\"><a class=\"btn medium orange button\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\/\" target=\"_blank\" rel=\"noopener noreferrer\">Learn more \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3>Overriding blue links in Apple Mail<\/h3>\n<p>When creating links around text, Apple Mail adds additional attributes to those links beyond the usual href. A simple example is the following:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;a rel=\"noopener\" href=\"#\" x-apple-data-detectors=\"true\"><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_6c2e6a22c52ef643b9e8c4bddbdd8c1c\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>We covered <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/update-banning-blue-links-on-ios-devices\">many ways to handle iOS blue links<\/a> in the past. Fortunately, all you need to do now is target elements with specific attributes and override styling for those elements.<\/p>\n<p>In the style block of your email, add the following to target Apple-added links and force that text to inherit the styling from its parent element:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">a[x-apple-data-detectors] {\ncolor: inherit !important;\n            text-decoration: none !important;\n            font-size: inherit !important;\n            font-family: inherit !important;\n            font-weight: inherit !important;\n            line-height: inherit !important;\n}<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_5c3a0216ed3e29281243db566f3f4ae3\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>The functionality will still be there, but the text will be styled as you originally intended.<\/p>\n<p>To ensure people know the content is clickable, change the value for color from inherit to a hex color code that matches your brand\u2019s design (e.g. #77d6fc for light blue) and change the value for text-decoration to underline.<\/p>\n<h3>Overriding blue links in Gmail<\/h3>\n<p>Instead of adding attributes to auto-linked text, Gmail does something else entirely. When processing the HTML of an email, Gmail will convert the doctype to an underline element (u). Knowing this, you can then add a hook into your own HTML to target elements only for Gmail. This is commonly done by adding an ID to the body element.<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;body id=\"body\">&lt;\/body><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_9865b83066feb6837cced43e01fd68b3\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>While there are <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/how-to-fix-blue-links-in-gmail\">a few ways to fix Gmail blue links<\/a>, this is our recommendation: Target all of the links contained within the body in Gmail with the following in your style tag, overriding any added styling in the process:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">u + #body a {\n            color: inherit !important;\n            text-decoration: none !important;\n            font-size: inherit !important;\n            font-family: inherit !important;\n            font-weight: inherit !important;\n            line-height: inherit !important;\n}<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_263784b2c8554eba8161154636cd61c1\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>It uses the exact same CSS properties as the Apple Mail trick, just specifically applied to Gmail.<\/p>\n<p>Remember to update the color and text-decoration values to make it obvious to subscribers that they can click the auto-links. Again, some people prefer the option, so don\u2019t hide it from them.<\/p>\n<h3>Overriding blue links in Samsung Mail<\/h3>\n<p>Samsung Mail uses a similar technique to Gmail. Instead of converting one element to another, though, Samsung Mail will add a specific ID to the email called \u201cMessageViewBody.\u201d Just like with Gmail, target that ID and any links contained within in your style block:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">#MessageViewBody a {\n            color: inherit !important;\n            text-decoration: none !important;\n            font-size: inherit !important;\n            font-family: inherit !important;\n            font-weight: inherit !important;\n            line-height: inherit !important;\n}<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_edb9d23b144573f1e909db06ec47e8ba\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>Again, the exact same CSS properties are used as before. And you\u2019ll want to swap for your brand\u2019s color value and underline the link if that\u2019s part of your design guide.<\/p>\n<h3>All together now<\/h3>\n<p>While it would be convenient to chain all of the above CSS selectors into one rule, Gmail strips CSS using attribute selectors, so the fix would be removed from Gmail, allowing blue links to roam free.<\/p>\n<p>Therefore, you should keep all three rules separate. The good news is after they\u2019re added to email templates, you don\u2019t need to do anything additional in your code to remove blue links from most email clients.<\/p>\n<p>Combined, your HTML could look like this:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;html>\n\t&lt;head>\n\t&lt;style>\na[x-apple-data-detectors] {\n\tcolor: #77d6fc !important;\n\tfont-size: inherit !important;\n\tfont-family: inherit !important;\n\tfont-weight: inherit !important;\n\tline-height: inherit !important;\n}\nu + #body a {\n\tcolor: #77d6fc !important;\n\tfont-size: inherit !important;\n\tfont-family: inherit !important;\n\tfont-weight: inherit !important;\n\tline-height: inherit !important;\n}\n#MessageViewBody a {\n\tcolor: #77d6fc !important;\n\tfont-size: inherit !important;\n\tfont-family: inherit !important;\n\tfont-weight: inherit !important;\n\tline-height: inherit !important;\n}\n&lt;\/style>\n&lt;\/head>\n&lt;body id=\"body\">\n &lt;your email code goes here as normal>\n&lt;\/body><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_c437976d16958fdefdd10b1074911b8a\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>Here\u2019s an example of what this could look like if you did nothing (without fix), removed the default style without adding your own (with fix), and replaced the default styling with your own (with styled fix):<\/p>\n<table class=\"tg\" style=\"margin-bottom: 30px;\">\n<thead>\n<tr>\n<th class=\"tg-baqh\" style=\"text-align: center;\"><span style=\"font-style: normal; text-decoration: none; color: #000; background-color: transparent;\">Without fix<\/span><\/th>\n<th class=\"tg-baqh\" style=\"text-align: center;\"><span style=\"font-style: normal; text-decoration: none; color: #000; background-color: transparent;\">With fix<\/span><\/th>\n<th class=\"tg-baqh\" style=\"text-align: center;\"><span style=\"font-style: normal; text-decoration: none; color: #000; background-color: transparent;\">With styled fix<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"tg-0lax\" style=\"text-align: center;\"><img decoding=\"async\" class=\"alignnone wp-image-31964 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/withoutfix.png\" alt=\"blue links in email example without fix\" width=\"414\" height=\"549\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/withoutfix.png 414w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/withoutfix-226x300.png 226w\" sizes=\"(max-width: 414px) 100vw, 414px\" \/><\/td>\n<td class=\"tg-0lax\" style=\"text-align: center;\"><img decoding=\"async\" class=\"alignnone wp-image-31963 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/withfix.png\" alt=\"blue links in email example with fix\" width=\"414\" height=\"549\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/withfix.png 414w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/withfix-226x300.png 226w\" sizes=\"(max-width: 414px) 100vw, 414px\" \/><\/td>\n<td class=\"tg-0lax\"><img decoding=\"async\" class=\"aligncenter wp-image-31962 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/withstyledfix.png\" alt=\"blue links in email example, with styled fix\" width=\"386\" height=\"512\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/withstyledfix.png 386w, https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/withstyledfix-226x300.png 226w\" sizes=\"(max-width: 386px) 100vw, 386px\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 id=\"edge-cases\">Handling edge cases for the just-in-case coder (and Outlook)<\/h2>\n<p>As you might know, there are always edge cases when it comes to email design. Blue links are no different. Some email clients will still auto-link text. And because <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-often-do-email-apps-change-more-often-than-you-might-think\/\">email apps change every 1-2 days<\/a>, the three clients above could very easily introduce an update that breaks those fixes.<\/p>\n<p>For these edge cases, you can take a different approach.<\/p>\n<p>This technique involves wrapping auto-link candidates with an element that is then targeted via CSS in the head of an email. The container element has a class applied for targeting. Before designers figured out they could use the x-apple-data-detectors hack, this trick was commonly used for Apple Mail blue links, so you\u2019ll commonly see something like \u201cappleLinks\u201d used for the class, but it can be anything.<\/p>\n<p>In our example, we\u2019ll use the class \u201cblueLinks\u201d:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;p class=\"blueLinks\">+1 (800) 123-4567&lt;\/p><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_8c1a5968ea288bc84918bda949117991\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>Since email clients will add a link within that element, target it in the CSS in your email\u2019s style block and override specific CSS properties:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.blueLinks a { \n            color:inherit !important; \n            text-decoration: none !important; \n}<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_42eaec7ededf9fa521a66560e6ea4086\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>This can be a very robust solution, but it requires more maintenance. Since the content of an email can change frequently, tracking where those classes are applied and ensuring all suspected text is accounted for can be time-consuming and prone to errors.<\/p>\n<p>That\u2019s why we typically recommend using the three embedded CSS solutions above, falling back to the class-based solution only when testing shows a need for it.<\/p>\n<h3>Your fix for Outlook desktop clients<\/h3>\n<p>Outlook mobile apps can be fixed with the edge case solution above, but that fix won\u2019t work with the Outlook desktop clients.<\/p>\n<p>For Outlook desktop clients, URLs and email addresses will always appear as the default colors if you don\u2019t wrap them in &lt;a&gt; tags. In most cases, you\u2019ll want these to link out to the webpage or email address that is presented, so adding the &lt;a&gt; tag with the href attribute and styling it as a link makes for a good subscriber experience.<\/p>\n<p>If you don\u2019t want it to look like a link, you can still add the &lt;a&gt; tag and style it to look like the rest of the copy.<\/p>\n<p>In edge cases, you may have a client who needs the URL to look like regular copy and not be linked. In this case, the only way to accomplish that is by adding lots of zero-width joiners throughout the link:<\/p>\n<p><strong>www.litmus.<\/strong><strong>com<\/strong> becomes <strong>w&amp;zwj;ww&amp;zwj;.&amp;zwj;litm&amp;zwj;us.&amp;zwj;com<\/strong><\/p>\n<p>This isn\u2019t the prettiest thing, but it works. However, it may cause friction with your subscribers if they try to copy and paste the URL. Sometimes the &amp;zwj; show up weird or interfere when pasted into different programs. For example, copying and pasting the URL when coded as it is above in the address bar in Firefox results in a Google search instead of taking you directly to Litmus.com:<\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-31968 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/Screen-Recording-2021-06-30-at-11.28.01-PM-1.gif\" alt=\"copying and pasting a link with zero-width joiners into a browser\" width=\"1244\" height=\"961\" \/>\n<p>So this is what I call a last-resort-bottom-of-the-bucket-client-won\u2019t-listen-to-reason fix.<\/p>\n<p>This fix does not work for email addresses, and in my experience, I haven\u2019t found a solution to create an unstyled, non-clickable email address that works for every email service provider (ESP). For some ESPs, you can use an &lt;a&gt; tag without an href attribute or an &lt;a rel=\"noopener\" target=\"_blank\" href=\u201d#\u201d&gt;. But some ESPs won\u2019t let you send an email with those hacks.<\/p>\n<h2>Fix the style, not the functionality<\/h2>\n<p>While you might want to remove the blue auto-links for the sake of a pixel-perfect design, remember who your email is for: your subscribers. Email clients have good intentions making things like addresses, dates, and <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/html-clickable-phone-number-in-email\" target=\"_blank\" rel=\"noopener\">clickable phone numbers<\/a>\u2014and many people like and look forward to using them that way. Don\u2019t hide them. Instead, transform them to match your email\u2019s design. You\u2019ll make both your stakeholders and your subscribers happy.<\/p>\n<div class=\"cta\">\n<table style=\"background-color: #f1f0f0; margin-bottom: 30px;\">\n<tbody>\n<tr>\n<td class=\"block-1\" style=\"padding: 20px 10px 20px 20px;\"><img decoding=\"async\" class=\"alignnone wp-image-15583 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/subject-line.png\" alt=\"happy inbox\" width=\"800\" height=\"751\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/subject-line.png 800w, https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/subject-line-300x282.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/subject-line-768x721.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/td>\n<td class=\"block-2\" style=\"padding: 20px 20px 20px 10px;\">\n<p class=\"zero\"><strong>Create on-brand, error-free emails with Litmus<br \/>\n<\/strong><\/p>\n<p class=\"zero\">See how your emails look (no more blue links, right?) across 100+ email clients, apps, and devices. Say goodbye to broken emails. Whew!<\/p>\n<p class=\"zero\"><a class=\"btn medium orange button\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/pricing\" target=\"_blank\" rel=\"noopener noreferrer\">Book a demo \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><em>Originally published on July 2, 2019, by Jason Rodriguez. Last updated on July 23, 2021.<\/em><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Get the code to prevent phone numbers, addresses, dates, and more from becoming blue links in email in Apple Mail, Gmail, Samsung Mail, and Outlook.<\/p>\n","protected":false},"author":3,"featured_media":31959,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[694,478,106,102],"blog_category":[53],"class_list":["post-3557","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-broken-email","tag-design","tag-gmail","tag-html","blog_category-tips-resources"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Frustrated by Blue Links in Email? Conquer Them Today - Litmus<\/title>\n<meta name=\"description\" content=\"Get the code to prevent phone numbers, addresses, dates, and more from becoming blue links in email in Apple Mail, Gmail, Samsung Mail, and Outlook.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frustrated by Blue Links in Email? Conquer Them for Good\" \/>\n<meta property=\"og:description\" content=\"Get the code to prevent phone numbers, addresses, dates, and more from becoming blue links in email in Apple Mail, Gmail, Samsung Mail, and Outlook.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-23T16:57:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-15T20:37:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/How-to-remove-blue-links.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"725\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Frustrated by Blue Links in Email? Conquer Them Today - Litmus","description":"Get the code to prevent phone numbers, addresses, dates, and more from becoming blue links in email in Apple Mail, Gmail, Samsung Mail, and Outlook.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails","og_locale":"en_US","og_type":"article","og_title":"Frustrated by Blue Links in Email? Conquer Them for Good","og_description":"Get the code to prevent phone numbers, addresses, dates, and more from becoming blue links in email in Apple Mail, Gmail, Samsung Mail, and Outlook.","og_url":"https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2021-07-23T16:57:35+00:00","article_modified_time":"2025-12-15T20:37:24+00:00","og_image":[{"width":1380,"height":725,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/How-to-remove-blue-links.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails"},"author":{"name":"","@id":""},"headline":"Frustrated by Blue Links in Email? Conquer Them for Good","datePublished":"2021-07-23T16:57:35+00:00","dateModified":"2025-12-15T20:37:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails"},"wordCount":10,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/How-to-remove-blue-links.png","keywords":["Broken Email","Design","Gmail","HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails","url":"https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails","name":"Frustrated by Blue Links in Email? Conquer Them Today - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/How-to-remove-blue-links.png","datePublished":"2021-07-23T16:57:35+00:00","dateModified":"2025-12-15T20:37:24+00:00","description":"Get the code to prevent phone numbers, addresses, dates, and more from becoming blue links in email in Apple Mail, Gmail, Samsung Mail, and Outlook.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/How-to-remove-blue-links.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/07\/How-to-remove-blue-links.png","width":1380,"height":725,"caption":"illustration of link icon, showing blue links in email"},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/how-to-remove-blue-links-in-html-emails#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"Frustrated by Blue Links in Email? Conquer Them for Good"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=3557"}],"version-history":[{"count":5,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3557\/revisions"}],"predecessor-version":[{"id":121660,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3557\/revisions\/121660"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/31959"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=3557"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=3557"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=3557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}